常用JS验证控件

jskey_validator.js

View Code

/* *
 * 名称命名规则说明
 * 首字母大写,非常少用的尽可能用Custom
 * 注:如果添加了方法形式的,记得在Validate中的case中补上
 * --------------------------------------------------------
 * skey:增加了默认的msg提示,以大量减少页面上的msg属性
 * skey:修改使支持非表单形式的元素值校验,如根据父元素ID校验所有需要校验的子元素
 * skey:增加alertMsg提示,弹出的信息可以与页面显示信息不同,默认与msg一致
 * skey:修改部分正则表达式,并重命名所有内部函数
 * skey:删除从未使用的部分验证,并作了部分小修改
 * 最后更新时间:2012-05-13 23:30 */ if( typeof ($jskey) != "object")
{
    $jskey = {};
}
$jskey.validator =
{
    "Char":{"value":/^[A-Za-z0-9_]+$/, "msg":"允许英文字母、数字、下划线"}, // "Chinese":{"value":/^[\u0391-\uFFE5]+$/, "msg":"只允许中文"},     "Chinese":{"value":/^[\u4e00-\u9fa5]+$/, "msg":"只允许中文"},
    "Email":{"value":/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "msg":"格式错误,如test@test.com"},
    "English":{"value":/^[A-Za-z]+$/, "msg":"只允许英文字母"},
    "IdCard":{"value":/^\d{15}(\d{2}[A-Za-z0-9\*])?$/, "msg":"只能输入18位的身份证号码"},
    "Mobile":{"value":/^((0\d{2,3}\d{6,15})|(1[358]{1}\d{9}))$/, "msg":"请输入手机号码(纯数字)"},
    "Money":{"value":/^(([1-9](\d+)?)|0)(\.\d+)?$/, "msg":"请输入金额"},
    "Numeral":{"value":/^\d+$/, "msg":"请输入数字"},
    "Phone":{"value":/^((0\d{2,3})|(\(0\d{2,3}\)))?(-)?[1-9]\d{6,7}(([\-0-9]+)?[^\D]{1})?$/, "msg":"请输入电话号码"},
    "Require":{"value":/\S+/, "msg":"必填"},
    "RequireCompact":{"value":/^\S+$/, "msg":"必填(无空格)"}, // 必填且不能有空格     "RequireTrim":{"value":/(^[^\s]{1}(.+)?[^\s]{1}$)|(^[^\s]{1}$)/, "msg":"必填(无前后空格)"}, // 前后不能有空格     "Url":{"value":/^http(s)?:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/, "msg":"格式错误,如http:\/\/127.0.0.1:80"},
    "Zip":{"value":/^[1-9]\d{5}$/, "msg":"邮政编码不存在"},
    "Number":{"value":"this._Number(value)", "msg":"请输入数值"},
    "NumberPlus":{"value":"this._NumberPlus(value)", "msg":"请输入正数"},
    "NumberMinus":{"value":"this._NumberMinus(value)", "msg":"请输入负数"},
    "Integer":{"value":"this._Integer(value)", "msg":"请输入整数"},
    "IntegerPlus":{"value":"this._IntegerPlus(value)", "msg":"请输入正整数"},
    "IntegerMinus":{"value":"this._IntegerMinus(value)", "msg":"请输入负整数"},
    "Custom":{"value":"this._Custom(value, getAttribute('regexp'))", "msg":""},
    "DateCheck":{"value":"this._DateCheck(value, getAttribute('operator'), document.getElementById(getAttribute('to')).value, getAttribute('require'))", "msg":"日期不正确"},
    "Filename":{"value":"this._Filename(value)", "msg":"文件名不能为空,且不能包含下列字符 \\ \/ \: \* \? \" < >"},
    "Filter":{"value":"this._Filter(value, getAttribute('accept'))", "msg":""},
    "Group":{"value":"this._Group(getAttribute('name'), getAttribute('min'), getAttribute('max'))", "msg":""},
    "Limit":{"value":"this._Limit(value.length, getAttribute('min'), getAttribute('max'))", "msg":""},
    "LimitB":{"value":"this._Limit(this._LenB(value), getAttribute('min'), getAttribute('max'))", "msg":""},
    "Password":{"value":"this._Password(value)", "msg":"密码不符合安全规则"},
    "Repeat":{"value":"value == document.getElementById(getAttribute('to')).value", "msg":"重复输入不一致"},
    "Range":{"value":"this._Range(value, getAttribute('min'), getAttribute('max'))", "msg":""},
    "UploadFile":{"value":"this._UploadFile(value)", "msg":"请上传文件"},
    "UploadFileCheck":{"value":"this._UploadFileCheck(value)", "msg":"有文件未上传,请上传或取消(清空上传内容)"},
    ErrorObj:[],
    ErrorMsg:["\u4ee5\u4e0b\u539f\u56e0\u5bfc\u81f4\u63d0\u4ea4\u5931\u8d25\uff1a\t\t\t\t"], // ErrorMsg:["以下原因导致提交失败：\t\t\t\t"],     AlertMsg:["\u4ee5\u4e0b\u539f\u56e0\u5bfc\u81f4\u63d0\u4ea4\u5931\u8d25\uff1a\t\t\t\t"], // AlertMsg:["以下原因导致提交失败：\t\t\t\t"],     
    Validate: function()
    { var formID = arguments[0] || ""; // formID和inputID必须有一个不为空，校验一组表单          var mode = arguments[1] || ""; // 不能为空          var inputID = arguments[2] || ""; // formID和inputID必须有一个不为空，校验单个表单          var obj =  null; if(formID ==  null || formID.length == 0)
        {
            obj = {arr : []}; var _o = document.getElementById(inputID); var _dt = _o.getAttribute("dataType"); if( typeof (_dt) == "object" ||  typeof ( this[_dt]) == "undefined")
            {
            } else
            {
                obj.arr.push(_o);
            }
        } else
        {
            obj = document.getElementById(formID) || event.srcElement; if(obj ==  null || obj.arr ==  null)
            {
                obj.arr = []; var _t = obj.getElementsByTagName('*'); var _dt; for( var i = 0;i < _t.length;i++)
                {
                    _dt = _t[i].getAttribute("dataType"); if( typeof (_dt) == "object" ||  typeof ( this[_dt]) == "undefined" ||  this[_dt] == "")
                    { continue;
                    }
                    obj.arr.push(_t[i]);
                }
            }
        } var count = obj.arr.length; var errMsg = ""; var alertMsg = ""; this.ErrorMsg.length = 1; this.AlertMsg.length = 1; this.ErrorObj.length = 1; this.ErrorObj[0] = obj; for( var i = 0;i < count;i++)
        { with(obj.arr[i])
            { var _dataType = getAttribute("dataType"); if( typeof (_dataType) == "object" ||  typeof ( this[_dataType]) == "undefined")
                { continue;
                } this.ClearState(obj.arr[i]); if(getAttribute("require") == "false" && value == "")
                { continue;
                } if(getAttribute("msg") ==  null)
                {
                    errMsg =  this[_dataType].msg;
                } else
                {
                    errMsg = getAttribute("msg");
                } if(getAttribute("alertMsg") ==  null ||  typeof (getAttribute("alertMsg")) == "undefined")
                {
                    alertMsg = errMsg;
                } else
                {
                    alertMsg = getAttribute("alertMsg");
                } switch(_dataType)
                { case "Number": case "NumberPlus": case "NumberMinus": case "Integer": case "IntegerPlus": case "IntegerMinus": case "Custom": case "DateCheck": case "Filename": case "Filter": case "Group": case "Limit": case "LimitB": case "Password": case "Repeat": case "Range": case "UploadFile": case "UploadFileCheck": if(!eval( this[_dataType].value))
                        { this.AddError(i, errMsg, alertMsg);
                        } break; default: if(! this[_dataType].value.test(value))
                        { this.AddError(i, errMsg, alertMsg);
                        } break;
                }
            }
        } if( this.ErrorMsg.length > 1)
        {
            mode = mode || 1; var errCount =  this.ErrorObj.length; switch(mode)
            { case 2: // 变红并弹出提示                      for(  var i = 1;i < errCount;i++)
                    { this.ErrorObj[i].style.color = "#ff0000";
                    } case 1: // 弹出提示                     alert( this.AlertMsg.join("\n")); // this.ErrorObj[1].focus();                      break; case 4: // 弹出提示并显示错误信息                     alert( this.AlertMsg.join("\n")); case 3: // 显示错误信息                      for( var i = 1;i < errCount;i++)
                    { try
                        { var span = document.createElement("SPAN");
                            span.id = "__ErrorMsgPanel";
                            span.style.color = "#ff0000"; this.ErrorObj[i].parentNode.appendChild(span);
                            span.innerHTML =  this.ErrorMsg[i].replace(/\d+:/, ""); // "*"                         } catch(e)
                        {
                            alert(e.description);
                        }
                    } break; default:
                    alert( this.AlertMsg.join("\n")); break;
            } return  false;
        } return  true;
    },
    ClearState: function(elem)
    { with(elem)
        { if(style.color == "#ff0000")
            {
                style.color = "";
            } var lastNode = parentNode.childNodes[parentNode.childNodes.length - 1]; if(lastNode.id == "__ErrorMsgPanel")
            {
                parentNode.removeChild(lastNode);
            }
        }
    },
    AddError: function(index, emsg, amsg)
    { this.ErrorObj[ this.ErrorObj.length] =  this.ErrorObj[0].arr[index]; this.ErrorMsg[ this.ErrorMsg.length] =  this.ErrorMsg.length + ":" + emsg; this.AlertMsg[ this.AlertMsg.length] =  this.AlertMsg.length + ":" + amsg;
    }, // 判断是否为格式正确的数字,小数点后可带0(如可以为-1,1,1.1等等)     _Number: function(v)
    { if(!isNaN(v))
        { if(v.length == 0 || v.indexOf("+") != -1)
            { return  false;
            } if(v.indexOf(".") == 0 || v.indexOf("-.") == 0 || v.indexOf("00") == 0 || v.indexOf("-00") == 0 || v.lastIndexOf(".") == v.length - 1)
            { return  false;
            } return  true;
        } return  false;
    }, // 判断是否为正值数字(如可以为0,1.1等等)     _NumberPlus: function(v)
    { if( this._Number(v))
        { if(v.indexOf("-") != -1)
            { return  false;
            } return  true;
        } return  false;
    }, // 判断是否为负值数字(如可以为-1.1,-2等等)     _NumberMinus: function(v)
    { if( this._Number(v))
        { if(v.indexOf("-") != -1)
            { return  true;
            }
        } return  false;
    }, // 判断是否为整数(如可以为-1,1等等)     _Integer: function(v)
    { if( this._Number(v))
        { if(v.indexOf(".") != -1)
            { return  false;
            } return  true;
        } return  false;
    }, // 判断是否为正整数(如可以为2等等)     _IntegerPlus: function(v)
    { if( this._Integer(v))
        { if(v.indexOf("-") != -1)
            { return  false;
            } return  true;
        } return  false;
    }, // 判断是否为负整数(如可以为-2,-0等等,注0只能为-0)     _IntegerMinus: function(v)
    { if( this._Integer(v))
        { if(v.indexOf("-") != -1)
            { return  true;
            }
        } return  false;
    },
    _Custom: function(op, reg)
    { return  new RegExp(reg, "g").test(op);
    },
    _DateCheck: function(op1, operator, op2, require)
    { if(require == "false" && op2.length == 0)
        { return  true; // 一个为空时是否不较验         } try
        { if(op1.length == 0 || op2.length == 0)
            { return  false;
            } var d1 = _ToDate(op1); var d2 = _ToDate(op2); if( typeof (d1) != "object" ||  typeof (d2) != "object")
            { return  false;
            } switch(operator)
            { case "==": return(d1 == d2); case "!=": return(d1 != d2); case ">": return(d1 > d2); case ">=": return(d1 >= d2); case "<": return(d1 < d2); case "<=": return(d1 <= d2); default: return(d1 >= d2);
            }
        } catch(e)
        {
        } return  false; function _ToDate(op)
        { try
            { var m, year, month, day;
                m = op.match( new RegExp("^(\\d{4})([-./])(\\d{1,2})\\2(\\d{1,2})$")); // (\\n指匹配第几个括号)                  if(m ==  null)
                { return "";
                }
                day = m[4];
                month = m[3] * 1;
                year = m[1]; if(!parseInt(month))
                { return "";
                }
                month = month == 0 ? 12 : month; return  new Date(year, month - 1, day);
            } catch(ee)
            {
            } return "";
        }
    }, // 合法文件名,文件名不能包含\/:*?"<>     _Filename: function(v)
    { if(v.length == 0)
        { return  false;
        } if(v.indexOf("\\") == -1
                && v.indexOf("\/") == -1
                && v.indexOf("\:") == -1
                && v.indexOf("\*") == -1
                && v.indexOf("\?") == -1
                && v.indexOf("\"") == -1
                && v.indexOf("<") == -1
                && v.indexOf(">") == -1
                && v.indexOf(".") != 0
                && v.lastIndexOf(".") != (v.length - 1)
            )
        { return  true;
        } return  false;
    },
    _Filter: function(input, filter)
    { return  new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input);
    },
    _Group: function(name, min, max)
    { var groups = document.getElementsByName(name); var hasChecked = 0;
        min = min || 1;
        max = max || groups.length; for( var i = groups.length - 1;i >= 0;i--)
        { if(groups[i].checked)
            {
                hasChecked++;
            }
        } return min <= hasChecked && hasChecked <= max;
    },
    _Limit: function(len, min, max)
    {
        min = min || 0;
        max = max || Number.MAX_VALUE; return min <= len && len <= max;
    },
    _LenB: function(str)
    { return str.replace(/[^\x00-\xff]/g, "**").length;
    },
    _Password: function(str)
    { return !(/^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/.test(str));
    },
    _Range: function(str, min, max)
    {
        min = min || (-1 * Number.MAX_VALUE);
        max = max || Number.MAX_VALUE; return min <= str && str <= max;
    }, // 用于jskey_upload或jskey_multiupload的校验,不为0和空则为已上传,等于0或空则为未上传     _UploadFile: function(v)
    { if(v != "")
        { if(v == "0")
            { return  false;
            } return  true;
        } return  false;
    }, // 用于jskey_upload或jskey_multiupload的校验,file表单为空则返回true,不为空则选择了文件未进行上传     _UploadFileCheck: function(v)
    { return v == "";
    }, // 默认自带一些校验方法     submit: function(containerid, submitid, type)
    { if( this.Validate(containerid, 3))
        { if(type ==  null || type != "select")
            { var _msg = "是否确定提交?"; if(type == "insert")
                    _msg = "是否确定提交?"; else  if(type == "update")
                    _msg = "是否确定保存?"; if(!confirm(_msg))
                { return  false;
                }
            }
            document.getElementById(submitid).click(); return  true;
        } return  false;
    }
};

部分操作样例：

jskey_validator_demo.html

View Code

< script  type ="text/javascript"  src ="../jskey_validator.js" ></ script > < script  type ="text/javascript" > function  check(type)
{ if (type  <   1 )type  =   1 ; if (type  >   4 )type  =   4 ; if ( ! $jskey.validator.Validate( " dataForm " , type))
    { return   false ;
    }
    alert( " 验证通过 " );
} </ script > < center > < input  type ="button"  value ="验证模式一"  onclick ="check(1);"   /> &nbsp; < input  type ="button"  value ="验证模式二"  onclick ="check(2);"   /> &nbsp; < input  type ="button"  value ="验证模式三"  onclick ="check(3);"   /> &nbsp; < input  type ="button"  value ="验证模式四"  onclick ="check(4);"   /> < br  /> < div  id ="dataForm" > < table  border ="0"  cellspacing ="1"  cellpadding ="0"  class ="listTable"  style ="width:600px;" > < tr > < td  style ="width:30%;" >作用 </ td > < td  style ="width:70%;" >示例 </ td > </ tr > < tr > < td >英文字母、数字、下划线 </ td > < td >< input  type ="text"  id ="Char"  name ="Char"  dataType ="Char"  value =""   /></ td > </ tr > < tr > < td >中文 </ td > < td >< input  type ="text"  id ="Chinese"  name ="Chinese"  dataType ="Char"  value =""   /></ td > </ tr > < tr > < td >Email </ td > < td >< input  type ="text"  id ="Email"  name ="Email"  dataType ="Email"  value =""   /></ td > </ tr > < tr > < td >身份证号码 </ td > < td >< input  type ="text"  id ="IdCard"  name ="IdCard"  dataType ="IdCard"  value =""   /></ td > </ tr > < tr > < td >手机号码(纯数字) </ td > < td >< input  type ="text"  id ="Mobile"  name ="Mobile"  dataType ="Mobile"  value =""   /></ td > </ tr > < tr > < td >金额 </ td > < td >< input  type ="text"  id ="Money"  name ="Money"  dataType ="Money"  value =""   /></ td > </ tr > < tr > < td >数字 </ td > < td >< input  type ="text"  id ="Numeral"  name ="Numeral"  dataType ="Numeral"  value =""   /></ td > </ tr > < tr > < td >电话号码 </ td > < td >< input  type ="text"  id ="Phone"  name ="Phone"  dataType ="Phone"  value =""   /></ td > </ tr > < tr > < td >必填 </ td > < td >< input  type ="text"  id ="Require"  name ="Require"  dataType ="Require"  value =""   /></ td > </ tr > < tr > < td >必填(无空格) </ td > < td >< input  type ="text"  id ="RequireCompact"  name ="RequireCompact"  dataType ="RequireCompact"  value =""   /></ td > </ tr > < tr > < td >前后不能有空格 </ td > < td >< input  type ="text"  id ="RequireTrim"  name ="RequireTrim"  dataType ="RequireTrim"  value =""   /></ td > </ tr > < tr > < td >Url </ td > < td >< input  type ="text"  id ="Url"  name ="Url"  dataType ="Url"  value =""   /></ td > </ tr > < tr > < td >邮政编码 </ td > < td >< input  type ="text"  id ="Zip"  name ="Zip"  dataType ="Zip"  value =""   /></ td > </ tr > < tr > < td >数值 </ td > < td >< input  type ="text"  id ="Number"  name ="Number"  dataType ="Number"  value =""   /></ td > </ tr > < tr > < td >正数 </ td > < td >< input  type ="text"  id ="NumberPlus"  name ="NumberPlus"  dataType ="NumberPlus"  value =""   /></ td > </ tr > < tr > < td >负数 </ td > < td >< input  type ="text"  id ="NumberMinus"  name ="NumberMinus"  dataType ="NumberMinus"  value =""   /></ td > </ tr > < tr > < td >整数 </ td > < td >< input  type ="text"  id ="Integer"  name ="Integer"  dataType ="Integer"  value =""   /></ td > </ tr > < tr > < td >正整数 </ td > < td >< input  type ="text"  id ="IntegerPlus"  name ="IntegerPlus"  dataType ="IntegerPlus"  value =""   /></ td > </ tr > < tr > < td >负整数 </ td > < td >< input  type ="text"  id ="IntegerMinus"  name ="IntegerMinus"  dataType ="IntegerMinus"  value =""   /></ td > </ tr > < tr > < td >限制大小 </ td > < td >< input  type ="text"  id ="Compare"  name ="Compare"  dataType ="Compare"  msg ="18以上"  to ="18"  operator =">="  value =""   /></ td > </ tr > < tr > < td > &nbsp; </ td > < td >默认( &gt;=) (==) (!=) ( &gt;) ( &gt;=) ( &lt;) ( &lt;=) </ td > </ tr > < tr > < td >日期比较 </ td > < td >
        开始： < input  type ="text"  id ="DateCheckTo"  name ="DateCheckTo"  value =""   />< br  />
        结束： < input  type ="text"  id ="DateCheck"  name ="DateCheck"  dataType ="DateCheck"  operator =">="  to ="DateCheckTo"  value =""   /> </ td > </ tr > < tr > < td > &nbsp; </ td > < td >默认( &gt;=) (==) (!=) ( &gt;) ( &gt;=) ( &lt;) ( &lt;=) </ td > </ tr > < tr > < td >文件名 </ td > < td >< input  type ="text"  id ="Filename"  name ="Filename"  dataType ="Filename"  value =""   /></ td > </ tr > < tr > < td >所在省份： </ td > < td >
            广东 < input  name ="Province"  value ="1"  type ="radio"   />
            陕西 < input  name ="Province"  value ="2"  type ="radio"   />
            浙江 < input  name ="Province"  value ="3"  type ="radio"   />
            江西 < input  name ="Province"  value ="4"  type ="radio"  dataType ="Group"   msg ="必须选定一个省份"   /> </ td > </ tr > < tr > < td >爱好： </ td > < td >
            运动 < input  name ="Favorite"  value ="1"  type ="checkbox"   />
            上网 < input  name ="Favorite"  value ="2"  type ="checkbox"   />
            音乐 < input  name ="Favorite"  value ="3"  type ="checkbox"   />
            看书 < input  name ="Favorite"  value ="4"  type ="checkbox" " dataType ="Group"  min ="2"  max ="3"   msg ="必须选择2~3种爱好"   /> </ td > </ tr > < tr > < td >输入长度范围 </ td > < td >< input  type ="text"  id ="Limit"  name ="Limit"  dataType ="Limit"  min ="10"  max ="20"  msg ="长度10到20字"  value =""   /></ td > </ tr > < tr > < td >输入长度范围(字符) </ td > < td >< input  type ="text"  id ="LimitB"  name ="LimitB"  dataType ="LimitB"  min ="10"  max ="20"  msg ="长度10到20字节"  value =""   /></ td > </ tr > < tr > < td >重复 </ td > < td >
            密码： < input  type ="text"  id ="RepeatTo"  name ="RepeatTo"  dataType ="Password"  value =""   />< br  />
            重复： < input  type ="text"  id ="Repeat"  name ="Repeat"  dataType ="Repeat"  to ="RepeatTo"  value =""   /> </ td > </ tr > < tr > < td >限制大小 </ td > < td >< input  type ="text"  id ="Range"  name ="Range"  dataType ="Range"  max ="20"  msg ="小于20"  value =""   /></ td > </ tr > < tr > < td > &nbsp; </ td > < td >< input  type ="text"  id ="Range2"  name ="Range2"  dataType ="Range"  min ="10"  max ="20"  msg ="数字10到20"  value =""   /></ td > </ tr > </ table > </ div > </ center >

以上是旧版本内容，有少许bug

新版下载和更新地址

http://www.cnblogs.com/skey_chen/archive/2012/07/18/2596926.html