您的位置:奥门新浦京网址 > 奥门新浦新京官方网站 > 验证函数,当前比较流行的错误提示_javascript技巧

验证函数,当前比较流行的错误提示_javascript技巧

发布时间:2019-11-25 12:56编辑:奥门新浦新京官方网站浏览(69)

    1、给DOM对象添加的属性是一个对象的引用。范例:var MyObject = {};document.getElementById.myProp = MyObject;解决方法:在window.onunload事件中写上: document.getElementById.myProp = null;

    前段时间写了一个 js数据验证、js email验证、js url验证、js长度验证、js数字验证等 弹出对话框形式的 但是,现在不太流行那种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式 共享给大家,如果大家使用有bug,请大家给我留言完善,谢谢了. 保存为 test.js复制代码 代码如下:/** * 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息. * * @author wangzi6hao * @version 2.1 * @description 2009-05-16 */ var checkData = new function() { var idExt="_wangzi6hao_Span";//生成span层的id后缀 /** * 得到中英文字符长 * * @param {} * str * @return 字符长 */ this.length = function { var p1 = new RegExp var p2 = new RegExp return escape.replace.length } /** * 删除对应id元素 */ this.remove = function { var idObject = document.getElementById; if idObject.parentNode.removeChild; } /** * 在对应id后面错误信息 * * @param id:需要显示错误信息的id元素 * str:显示错误信息 */ this.appendError = function { this.remove;// 如果span元素存在,则先删除此元素 var spanNew = document.createElement;// 创建span spanNew.id = id + idExt;// 生成spanid spanNew.style.color = "red"; spanNew.appendChild(document.createTextNode;// 给span添加内容 var inputId = document.getElementById; inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span } /** * @description 过滤所有空格字符。 * @param str:需要去掉空间的原始字符串 * @return 返回已经去掉空格的字符串 */ this.trimSpace = function { str += ""; while == ' ') || == '???') || == '%u3000')) str = str.substring; while ((str.charAt == ' ') || (str.charAt == '???') || (escape(str.charAt == '%u3000')) str = str.substring; return str; } /** * 过滤字符串开始部分的空格字符串结束部分的空格将文字中间多个相连的空格变为一个空格 * * @param {Object} * inputString */ this.trim = function { if (typeof inputString != "string") { return inputString; } var retValue = inputString; var ch = retValue.substring; while { // 检查字符串开始部分的空格 retValue = retValue.substring; ch = retValue.substring; } ch = retValue.substring(retValue.length - 1, retValue.length); while { // 检查字符串结束部分的空格 retValue = retValue.substring(0, retValue.length - 1); ch = retValue.substring(retValue.length - 1, retValue.length); } while != -1) { // 将文字中间多个相连的空格变为一个空格 retValue = retValue.substring(0, retValue.indexOf + retValue.substring + 1, retValue.length); } return retValue; } /** * 过滤字符串,指定过滤内容,如果内容为空,则默认过滤 '~!@#$%^&*()-+." * * @param {Object} * str * @param {Object} * filterStr * * @return 包含过滤内容,返回True,否则返回false; */ this.filterStr = function { filterString = filterString == "" ? "'~!@#$%^&*()-+."" : filterString var ch; var i; var temp; var error = false;// 当包含非法字符时,返回True for (i = 0; i <= (filterString.length - 1); i++) { ch = filterString.charAt; temp = str.indexOf { error = true; break; } } return error; } this.filterStrSpan = function { filterString = filterString == "" ? "'~!@#$%^&*()-+."" : filterString var val = document.getElementById; if (this.filterStr(val.value, filterString)) { val.select(); var str = "不能包含非法字符" + filterString; this.appendError; return false; } else { this.remove; return true; } } /** * 检查是否为网址 * * @param {} * str_url * @return {Boolean} true:是网址,false:不是网址; */ this.isURL = function {// 验证url var strRegex = "^((https|http|ftp|rtsp|mms)?://)" + "?.&=+$%-]+: )?[0-9a-z_!~*'?" // ftp的user@ + "{3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184 + "|" // 允许IP和DOMAIN + "*" // 域名- www. + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." // 二级域名 + "[a-z]{2,6})" // first level domain- .com or .museum + "?" // 端口- :80 + "|" // a slash isn't required if there is no file name + ".;?:@&=+$,%#-]+)+/?)$"; var re = new RegExp; return re.test; } this.isURLSpan = function { var val = document.getElementById; if (!this.isURL { val.select(); var str = "链接不符合格式;"; this.appendError; return false; } else { this.remove; return true; } } /** * 检查是否为电子邮件 * * @param {} * str * @return {Boolean} true:电子邮件,false:不是电子邮件; */ this.isEmail = function { var re = /^([a-zA-Z0-9]+[_|-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|-|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/; return re.test; } this.isEmailSpan = function { var val = document.getElementById; if (!this.isEmail { val.select(); var str = "邮件不符合格式;"; this.appendError; return false; } else { this.remove; return true; } } /** * 检查是否为数字 * * @param {} * str * @return {Boolean} true:数字,false:不是数字; */ this.isNum = function { var re = /^[d]+$/ return re.test; } this.isNumSpan = function { var val = document.getElementById; if (!this.isNum { val.select(); var str = "必须是数字;"; this.appendError; return false; } else { this.remove; return true; } } /** * 检查数值是否在给定范围以内,为空,不做检查
    * * @param {} * str_num * @param {} * small 应该大于或者等于的数值 * @param {} * big 应该小于或者等于的数值 * * @return {Boolean} 小于最小数值或者大于最大数值数字返回false 否则返回true; */ this.isRangeNum = function { if // 检查是否为数字 return false if (small == "" && big == "") throw str_num + "没有定义最大,最小值数字!"; if { if return false; } if { if return false; } return true; } this.isRangeNumSpan = function { var val = document.getElementById; if (!this.isRangeNum(val.value, small, big)) { val.select(); var str = ""; if { str = "应该大于或者等于 " + small; } if { str += " 应该小于或者等于 " + big; } this.appendError; return false; } else { this.remove; return true; } } /** * 检查是否为合格字符串
    * 是由a-z0-9_组成的字符串 * * @param {} * str 检查的字符串 * @param {} * idStr 光标定位的字段ID只能接收ID * @return {Boolean} 不是"a-z0-9_"组成返回false,否则返回true; */ this.isLicit = function { var re = /^[_0-9a-zA-Z]*$/ return re.test; } this.isLicitSpan = function { var val = document.getElementById; if (!this.isLicit { val.select(); var str = "是由a-z0-9_组成的字符串;"; this.appendError; return false; } else { this.remove; return true; } } /** * 检查二个字符串是否相等 * * @param {} * str1 第一个字符串 * @param {} * str2 第二个字符串 * @return {Boolean} 字符串不相等返回false,否则返回true; */ this.isEquals = function { return str1 == str2; } this.isEqualsSpan = function { var val = document.getElementById; var val1 = document.getElementById; if (!this.isEquals(val.value, val1.value)) { val.select(); var str = "二次输入内容必须一样;"; this.appendError; return false; } else { this.remove; return true; } } /** * 检查字符串是否在给定长度范围以内,字符为空,不做检查
    * * @param {} * str 检查的字符 * @param {} * lessLen 应该大于或者等于的长度 * @param {} * moreLen 应该小于或者等于的长度 * * @return {Boolean} 小于最小长度或者大于最大长度数字返回false; */ this.isRange = function(str, lessLen, moreLen) { var strLen = this.length; if { if return false; } if { if return false; } if (lessLen == "" && moreLen == "") throw "没有定义最大最小长度!"; return true; } this.isRangeSpan = function { var val = document.getElementById; if (!this.isRange(val.value, lessLen, moreLen)) { var str = "长度"; if str += "大于或者等于 " + lessLen + ";"; if str += " 应该小于或者等于 " + moreLen; val.select(); this.appendError; return false; } else { this.remove; return true; } } /** * 检查字符串是否小于给定长度范围
    * * @param {} * str 字符串 * @param {} * lessLen 小于或等于长度 * * @return {Boolean} 小于给定长度数字返回false; */ this.isLess = function { return this.isRange; } this.isLessSpan = function { var val = document.getElementById; if (!this.isLess { var str = "长度大于或者等于 " + lessLen; val.select(); this.appendError; return false; } else { this.remove; return true; } } /** * 检查字符串是否大于给定长度范围
    * * @param {} * str 字符串 * @param {} * moreLen 小于或等于长度 * * @return {Boolean} 大于给定长度数字返回false; */ this.isMore = function { return this.isRange; } this.isMoreSpan = function { var val = document.getElementById; if (!this.isMore { var str = "长度应该小于或者等于 " + moreLen; val.select(); this.appendError; return false; } else { this.remove; return true; } } /** * 检查字符不为空 * * @param {} * str * @return {Boolean} 字符为空返回true,否则为false; */ this.isEmpty = function { return str == ""; } this.isEmptySpan = function { var val = document.getElementById; if (this.isEmpty { var str = "不允许为空;"; val.select(); this.appendError; return false; } else { this.remove; return true; } } } 下面是具体的测试页面:复制代码 代码如下:

    复制代码 代码如下:/** * 得到中英文字符长 * @param {} str * @return {} */ function LengthB{ var p1 = new RegExp var p2 = new RegExp return escape.replace.length } /** * 过滤所有空格字符 * @param {Object} str */ function jsTrim{ str += ""; while == ' ') || == '???') || == '%u3000')) str = str.substring; while ((str.charAt == ' ') || (str.charAt == '???') || (escape(str.charAt == '%u3000')) str = str.substring; return str; } /** * 过滤中间字符串和多个空格 * @param {Object} inputString */ function trim{ if (typeof inputString != "string") { return inputString; } var retValue = inputString; var ch = retValue.substring; while { //检查字符串开始部分的空格 retValue = retValue.substring; ch = retValue.substring; } ch = retValue.substring(retValue.length - 1, retValue.length); while { //检查字符串结束部分的空格 retValue = retValue.substring(0, retValue.length - 1); ch = retValue.substring(retValue.length - 1, retValue.length); } while != -1) { //将文字中间多个相连的空格变为一个空格 retValue = retValue.substring(0, retValue.indexOf + retValue.substring + 1, retValue.length); } return retValue; } /** * 过滤字符串,指定过滤内容,如果内容为空,则默认过滤 '~!@#$%^&*()-+." * @param {Object} str * @param {Object} filterStr * * @return 包含过滤内容,返回True,否则返回false; */ function FilterStr{ filterStr = filterStr == "" ? "'~!@#$%^&*()-+."" : filterStr var ch; var i; var temp; var error = false;//当包含非法字符时,返回True for (i = 0; i <= ; i++) { ch = filterStr.charAt; temp = str.indexOf { error = true; break; } } return error; } /** * 过滤指定内容字符串 * @param {Object} str 检查字符串 * @param {Object} filterStr 过滤字符串,内容为空,则默认过滤 '~!@#$%^&*()-+." * @param {Object} alertStr 弹出对话内容 * @param {Object} idStr 出错返回出错字段ID */ function ISFilterStr(str, filterStr, alertStr, idStr){ alertStr = "对不起,您输入的 " + alertStr + " 不允包含 " + filterStr + " 非法字符"; if (FilterStr this.AlertAndRFalse; } /** * 检查是否为网址 * @param {} str_url * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 不是网址返回false; */ function IsURL(str_url, alertStr, idStr){// 验证url alertStr = alertStr + " 格式不正确!"; var strRegex = "^((https|http|ftp|rtsp|mms)?://)" + "?.&=+$%-]+: )?[0-9a-z_!~*'?" // ftp的user@ + "{3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184 + "|" // 允许IP和DOMAIN + "*" // 域名- www. + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]." // 二级域名 + "[a-z]{2,6})" // first level domain- .com or .museum + "?" // 端口- :80 + "|" // a slash isn't required if there is no file name + ".;?:@&=+$,%#-]+)+/?)$"; var re = new RegExp; if this.AlertAndRFalse; } /** * 检查是否为电子邮件 * @param {} str * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 不是电子邮件返回false; */ function IsEmail{ alertStr = alertStr + " 格式不正确!"; var re = /^([a-zA-Z0-9]+[_|-|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|-|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/; if this.AlertAndRFalse; } /** * 检查是否为数字 * @param {} str * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 不是数字返回false; */ function IsNum{ alertStr = alertStr + " 应该由数字组成!"; var re = /^[d]+$/ if this.AlertAndRFalse; } /** * 检查数值是否在给定范围以内
    * @param {} str_num * @param {} moreLen 应该大于或者等于的数值 * @param {} lessLen 应该小于或者等于的数值 * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 小于最小数值或者大于最大数值数字返回false; */ function IsRangeNum(str_num, moreLen, lessLen, alertStr, idStr){ IsNum(str_num, alertStr, idStr); if { alertStr = alertStr + " 数值不能小于 " + moreLen; if this.AlertAndRFalse; } if { alertStr = alertStr + " 数值不能大于 " + lessLen; if this.AlertAndRFalse; } if (moreLen == "" && lessLen == "") this.AlertAndRFalse; } /** * 检查是否为合格字符串
    * 长度在6至20位,并且是由a-z0-9_组成的字符串 * @param {} str 检查的字符串 * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 不是"长度在6至20位且由a-z0-9_"组成返回false; */ function IsLicit{ alertStr = "对不起," + alertStr + " 不能为空并且只能由 0到9 a到z 下划线 的6到20位组成! "; var re = /^[_0-9a-zA-Z]{6,20}$/ if this.AlertAndRFalse; } /** * 检查二个字符串是否相等 * @param {} str1 第一个字符串 * @param {} str2 第二个字符串 * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 字符串不相等返回false; */ function IsStrEquals(str1, str2, alertStr, idStr){ alertStr = "二次 " + alertStr + " 不一致!"; if this.AlertAndRFalse; } /** * 检查字符串是否在给定长度范围以内
    * * @param {} str 检查的字符 * @param {} moreLen 应该大于或者等于的长度 * @param {} lessLen 应该小于或者等于的长度 * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 小于最小长度或者大于最大长度数字返回false; */ function IsRange(str, moreLen, lessLen, alertStr, idStr){ var strLen = LengthB; if { alertStr = alertStr + " 应该大于或等于 " + moreLen + " 个字节长度!"; if this.AlertAndRFalse; } if { alertStr = alertStr + " 应该小于或等于 " + lessLen + " 个字节长度!"; if this.AlertAndRFalse; } if (moreLen == "" && lessLen == "") this.AlertAndRFalse; } /** * 检查字符串是否小于给定长度范围
    * @param {} str 字符串 * @param {} lessLen 小于或等于长度 * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 大于给定长度数字返回false; */ function IsLess(str, lessLen, alertStr, idStr){ IsRange(str, "", lessLen, alertStr, idStr); } /** * 检查字符不为空 * @param {} str * @param {} alertStr 弹出字段内容 * @param {} idStr 光标定位的字段ID只能接收ID * @return {Boolean} 字符为空返回false; */ function IsEmpty{ alertStr = alertStr + " 不能为空!"; if this.AlertAndRFalse; } /** * 弹出警示框,并定位到出错字段上 * @param {} alertStr 弹出警告框内容 * @param {} idStr 返回字段焦点 * @return {Boolean} 返回false */ function AlertAndRFalse{ alert; document.getElementById; throw "valueErr"; } // JavaScript Document 调用示例 function checkForm() { try { var title = trim(document.getElementById; //文章标题 IsEmpty;//不可为空 IsLess(title,100,"文章标题","title");//标题应少于100个字符长 ISFilterStr-=_+[]{}|\;':",./<>?", "文章标题","title")//标题不允许包含这些非法字符 } catch { if return false; } }

    2、DOM对象与JS对象相互引用。范例:function Encapsulator { this.elementReference = element; element.myProp = this;}new Encapsulator(document.getElementById;解决方法:在onunload事件中写上: document.getElementById.myProp = null;

    网页标题

    3、给DOM对象用attachEvent绑定事件。范例:function doClick() {}element.attachEvent;解决方法:在onunload事件中写上: element.detachEvent;

    效果图:

    本文由奥门新浦京网址发布于奥门新浦新京官方网站,转载请注明出处:验证函数,当前比较流行的错误提示_javascript技巧

    关键词: