常用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":"格式错误,如[email protected]"},
    "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