Javascript 验证Validator.js 使用全解(转载)

最新推荐文章于 2024-08-21 08:22:11 发布

weimiao501

最新推荐文章于 2024-08-21 08:22:11 发布

阅读量983

点赞数

文章标签： javascript input function email date integer

本文链接：https://blog.csdn.net/weimiao501/article/details/6426117

版权

Validator={
Require : /.+/,
Email : /^/w+([-+.]/w+)*@/w+([-.]//w+)*/./w+([-.]/w+)*$/,
Phone : /^((/(/d{3}/))|(/d{3}/-))?(/(0/d{2,3}/)|0/d{2,3}-)?[1-9]/d{6,7}$/,
Mobile : /^((/(/d{3}/))|(/d{3}/-))?13/d{9}$/,
Url : /^http:[A-Za-z0-9]+/.[A-Za-z0-9]+[//=/?%/-&_~`@[/]/’:+!]*([^<>/"/"])*$/,
IdCard : /^/d{15}(/d{2}[A-Za-z0-9])?$/,
Currency : /^/d+(/./d+)?$/,
Number : /^/d+$/,
Zip : /^[1-9]/d{5}$/,
QQ : /^[1-9]/d{4,8}$/,
Integer : /^[-/+]?/d+$/,
Dole : /^[-/+]?/d+(/./d+)?$/,
English : /^[A-Za-z]+$/,
Chinese : /^[/Α-/￥]+$/,
UnSafe : /^(([A-Z]*|[a-z]*|/d*|[-_/~!@#/$%/^&/*/./(/)/[/]/{/}<>/?/’/"]*)|.{0,5})$|/s/,
IsSafe : function(str){return !this.UnSafe.test(str);},
SafeString : "this.IsSafe(val)",
Limit : "this.limit(val.length,getAttribute(’min’), getAttribute(’max’))",
LimitB : "this.limit(this.LenB(val), getAttribute(’min’), getAttribute(’max’))",
Date : "this.IsDate(val, getAttribute(’min’), getAttribute(’format’))",
Repeat : "val == document.getElementsByName(getAttribute(’to’))[0].val",
Range : "getAttribute(’min’) < val && val < getAttribute(’max’)",
Compare : "this.compare(val,getAttribute(’operator’),getAttribute(’to’))",
Custom : "this.Exec(val, getAttribute(’regexp’))",
Group : "this.MustChecked(getAttribute(’name’), getAttribute(’min’), getAttribute(’max’))",
ErrorItem : [document.forms[0]],
ErrorMessage : ["The cause of failure as below : /t/t/t/t"],
Validate : function(theform, mode){
  var obj = theform || event.srcElement;
  var count = obj.elements.length;
  this.ErrorMessage.length = 1;
  this.ErrorItem.length = 1;
  this.ErrorItem[0] = obj;
  for(var i=0;i<count;i++){
   with(obj.elements[i]){
    var _dataType = getAttribute("dataType" ;
    if(typeof(_dataType) == "object" || typeof(this[_dataType]) == "undefined" contin;
    this.ClearState(obj.elements[i]);
    if(getAttribute("require" == "false" && val == "" contin;
    switch(_dataType){
     case "Date" :
     case "Repeat" :
     case "Range" :
     case "Compare" :
     case "Custom" :
     case "Group" :
     case "Limit" :
     case "LimitB" :
     case "SafeString" :
      if(!eval(this[_dataType])) {
       this.AddError(i, getAttribute("msg" );
      }
      break;
     default :
      if(!this[_dataType].test(val)){
       this.AddError(i, getAttribute("msg" );
      }
      break;
    }
   }
  }
  if(this.ErrorMessage.length > 1){
   mode = mode || 1;
   var errCount = this.ErrorItem.length;
   switch(mode){
   case 2 :
    for(var i=1;i<errCount;i++)
     this.ErrorItem[i].style.color = "red";
   case 1 :
    alert(this.ErrorMessage.join("/n" );
    this.ErrorItem[1].focus();
    break;
   case 3 :
    for(var i=1;i<errCount;i++){
    try{
     var span = document.createElement("SPAN" ;
     span.id = "__ErrorMessagePanel";
     span.style.color = "red";
     this.ErrorItem[i].parentNode.appendChild(span);
     span.innerHTML = this.ErrorMessage[i].replace(//d+:/,"*" ;
     }
     catch(e){alert(e.description);}
    }
    this.ErrorItem[1].focus();
    break;
   default :
    alert(this.ErrorMessage.join("/n" );
    break;
   }
   return false;
  }
  return tr;
},
limit : function(len,min, max){
  min = min || 0;
  max = max || Number.MAX_VAL;
  return min <= len && len <= max;
},
LenB : function(str){
  return str.replace(/[^/x00-/xff]/g,"**" .length;
},
ClearState : function(elem){
  with(elem){
   if(style.color == "red"
    style.color = "";
   var lastNode = parentNode.childNodes[parentNode.childNodes.length-1];
   if(lastNode.id == "__ErrorMessagePanel"
    parentNode.removeChild(lastNode);
  }
},
AddError : function(index, str){
  this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index];
  this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str;
},
Exec : function(op, reg){
  return new RegExp(reg,"g" .test(op);
},
compare : function(op1,operator,op2){
  switch (operator) {
   case "NotEq l":
    return (op1 != op2);
   case "GreaterThan":
    return (op1 > op2);
   case "GreaterThanEq l":
    return (op1 >= op2);
   case "LessThan":
    return (op1 < op2);
   case "LessThanEq l":
    return (op1 <= op2);
   default:
    return (op1 == op2);
  }
},
MustChecked : 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;
},
IsDate : function(op, formatString){
  formatString = formatString || "ymd";
  var m, year, month, day;
  switch(formatString){
   case "ymd" :
    m = op.match(new RegExp("^//s*((//d{4})|(//d{2}))([-./])(//d{1,2})//4(//d{1,2})//s*$ " );
    if(m == null ) return false;
    day = m[6];
    month = m[5]--;
    year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10));
    break;
   case "dmy" :
    m = op.match(new RegExp("^//s*(//d{1,2})([-./])(//d{1,2})//2((//d{4})|(//d{2}))//s*$ " );
    if(m == null ) return false;
    day = m[1];
    month = m[3]--;
    year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10));
    break;
   default :
    break;
  }
  var date = new Date(year, month, day);
        return (typeof(date) == "object" && year == date.getFullYear() && month == date.getMonth() && day == date.getDate());
  function GetFullYear(y){return ((y<30 ? "20" : "19" + y)|0;}
}
}

js 代码

使用：

类型：字符串 。必选。

说明：用于设定表单项的输入数据验证类型。

选值说明 ：

可选值	验证功能
Require	必填项
Chinese	中文
English	英文
Number	数字
Integer	整数
Dole	实数
Email	Email地址格式
Url	基于HTTP协议的网址格式
Phone	电话号码格式
Mobile	手机号码格式
Currency	货币格式
Zip	邮政编码
IdCard	身份证号码
QQ	QQ号码
Date	日期
SafeString	安全密码
Repeat	重复输入
Compare	关系比较
Range	输入范围
Limit	限制输入长度
LimitB	限制输入的字节长度
Group	验证单/多选按钮组
Custom	自定义正则表达式验证

语法：max ="int "

类型：字符串。在dataType 属性值为Range 时必选，为Group 且待验证项是多选按钮组时可选(此时默认值为1 )，为为Limit/LimitB 时可选(此时默认值为1.7976931348623157e+308 ，即Number .MAX_VAL 的值)。

说明：当daType 属性值为Range 时，用于判断输入是否在min 与max 的属性值间；当dataType 属性值为Group ，且待验证项是多选按钮组时，用于设定多选按钮组的选中个数，判断选中个数是否在[min , max ]区间；当daType 属性值为Limit 时，用于验证输入的字符数是否在[min , max ]区间；当daType 属性值为LimitB 时，用于验证输入字符的字节数是否在[min , max ]区间。

语法：min ="int "

类型：字符串。在dataType 属性值为Range 时必选，为Group 且待验证项是多选按钮组时可选(此时默认值为1 )，为为Limit/LimitB 时可选(此时默认值为0)。

语法： msg ="string "

类型：字符串。必选。

说明：在验证失败时要提示的出错信息。

类型：字符串。在dataType 属性值为Compare 时可选(默认值为Eq l )。

说明：参考to 属性。
各选值所对应的关系操作符 ：

可选值	意义说明
NotEq l	不等于 !=
GreaterThan	大于 >
GreaterThanEq l	大于等于 >=
LessThan	小于 <
LessThanEq l	小于等于 <=
Eq l	等于 =

语法：require ="tr | false "

类型：字符串。可选。

说明：用于设定表单项的验证方式。当值为false 时表单项不是必填项，但当有填写时，仍然要执行dataType 属性所设定的验证方法，值为tr 或任何非false 字符时可省略此属性。

语法：to ="sting | int "

类型：字符串。当dataType 值为Repeat 或Compare 时必选。

说明：当dataType 值为Repeat 时，to 的值为某表单项的name 属性值，用于设定当前表单项的值是否与目标表单项的值一致；当dataType 的值为Compare 时，to 的选值类型为实数，用于判断当前表单项的输入与to 的值是否符合operator 属性值所指定的关系。

语法：format ="ymd | dmy "

类型：字符串。在dataType 属性值为Date 时可选(默认值为ymd )。

说明：用于验证输入是否为符合format 属性值所指定格式的日期。
符合规则的输入示例 : 2004-11-23 ，2004/11/23 ，04.11.23 ，23-11-2004 等
注意：当输入的年份为2 位时，如果数值小于30 ，将使年份看作处于21 世纪，否则为20 世纪。

语法：regexp ="object "

类型：字符串。在dataType 属性值为Custom时必选。

说明：用于验证输入是否符合regexp 属性所指定的正则表达式。

示例：

引用：http://www.phpchina.com/?8133/action_viewspace_itemid_3214.html

********************************************************************************************

使用帮助（FAQs）

********************************************************************************************

-------------------------------------------------------------------------------------------

验证表单

在表单中加上onsmit事件，触发调用Validaotor的Validate方法，代码示例：
<form onSmit="return Validator.Validate(this,3)" action="your_application_page" method="post">
... ...
</form>
Validate 方法有两个可选参数，第一个为表单对象，如果是写在表单的onsmit事件中，可以用this指代当前表单，默认值为事件源对象；第二个参数为错误提示模式，可选值为1,2和3，默认值为1。省略第二个参数时相当于使用Validate(objform,1)，省略第一个参数时相当于 Validate(this,1)。注意，不可以省略第一个参数而只写第二个参数，Validate(,2)是错误的用法。

--------------------------------------------------------------------------------------------

验证输入是否Email地址

代码示例：
<input name="Email" dataType="Email" msg="信箱格式不正确">
或

<input name="Email" dataType="Custom" regexp="^/w+([-+.]/w+)*@/w+([-.]//w+)*/./w+([-.]/w+)*$" msg="信箱格式不正确">

Validator 的必要属性是dataType和msg(区分大小写)，然后根据dataType值的不同，会引发出不同的属性。因为程序中已经集成 Email地址格式的正则，所以可以直接用dateType="Email"进行验证，如果对Email地址的格式有不同的限制，可以用自定义的正则来验证(参考第二段代码)。

--------------------------------------------------------------------------------------------

验证下拉菜单是否选中

代码示例：
<select name="Operation" dataType="Require" msg="未选择所用操作系统" >
<option val="">选择您所用的操作系统</option>
<option val="Win98">Win98</option>
<option val="Win2k">Win2k</option>
<option val="WinXP">WinXP</option>
</select>
注意，对于IE，在option中没写val属性时IE的解释引擎将自动设置其值为空，而Firefox时将自动设置其值为text属性址。例如，在示例代码中如果第一个option不写val属性，IE中将得到val为空，而Firefox为"选择您所用的操作系统"。

--------------------------------------------------------------------------------------------

验证是否选中单选按钮组中的一个

代码示例：
广东<input name="Province" val="1" type="radio">
陕西<input name="Province" val="2" type="radio">
浙江<input name="Province" val="3" type="radio">
江西<input name="Province" val="4" type="radio" dataType="Group" msg="必须选定一个省份" >
对于单/多选按钮组的验证，dataType属性都为Group，然后只需在按钮组的最后一个写上dataType和msg属性。
注意，要成为单/多选按钮组，它们必须具有相同的name属性值。

--------------------------------------------------------------------------------------------

限制多选按钮组的选中个数

代码示例：
运动<input name="Favorite" val="1" type="checkbox">
上网<input name="Favorite" val="2" type="checkbox">
听音乐<input name="Favorite" val="3" type="checkbox">
看书<input name="Favorite" val="4" type="checkbox"" dataType="Group" min="2" max="3" msg="必须选择2~3种爱好">
要限制多选按钮组的选中个数，必须设置min和max属性。min属性用于设定选中个数的下限，max为上限，默认时min为1，max为多选按钮组的个数。

--------------------------------------------------------------------------------------------

完整示例：运行 demo.html

//文件 demo.html

//该文件只是举例说明如何使用 Validator.js文件

<!DOCTYPE html PLIC "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
<html>
<head><title></title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Lang ge" content="gb2312">
<script lang ge="javascript" type="text/javascript" src="Validator.js"></script>
</head>
<body>
<title>表单验证类 Validator v1.05</title>
<style>
body,td{font:normal 12px Verdana;color:#333333}
input,textarea,select,td{font:normal 12px Verdana;color:#333333;border:1px solid #999999;background:#ffffff}
table{border-collapse:collapse;}
td{padding:3px}
input{height:20;}
textarea{width:80%;height:50px;overflow:auto;}
form{display:inline}
</style>
<table align="center">
<form name="theform" id="demo" method="get" onSmit="return Validator.Validate(this,2)">
<tr>
   <td>身份证号：</td><td><input name="Card" dataType="IdCard" msg="身份证号错误"></td>
</tr>
    <tr>
   <td>真实姓名：</td><td><input name="Name" dataType="Chinese" msg="真实姓名只允许中文"></td>
</tr>
<tr>
   <td>ID：</td><td><input name="username" dataType="Username" msg="ID名不符合规定"></td>
</tr>
<tr>
   <td>英文名：</td><td><input name="Nick" dataType="English" require="false" msg="英文名只允许英文字母"></td>
</tr>
    <tr>
   <td>主页：</td><td><input name="Homepage" require="false" dataType="Url"   msg="非法的Url"></td>
</tr>
<tr>
   <td>密码：</td><td><input name="Password" dataType="SafeString"   msg="密码不符合安全规则" type="password"></td>
</tr>
<tr>
   <td>重复：</td><td><input name="Repeat" dataType="Repeat" to="Password" msg="两次输入的密码不一致" type="password"></td>
</tr>
<tr>
   <td>信箱：</td><td><input name="Email" dataType="Email" msg="信箱格式不正确"></td>
</tr>
    <tr>
   <td>信箱：</td><td><input name="Email" dataType="Repeat" to="Email" msg="两次输入的信箱不一致"></td>
</tr>
<tr>
   <td>QQ：</td><td><input name="QQ" require="false" dataType="QQ" msg="QQ号码不存在"></td>
</tr>
    <tr>
   <td>身份证：</td><td><input name="Card" dataType="IdCard" msg="身份证号码不正确"></td>
</tr>
<tr>
   <td>年龄：</td><td><input name="Year" dataType="Range" msg="年龄必须在18~28之间" min="18" max="28"></td>
</tr>
   <tr>
   <td>年龄1：</td><td><input name="Year1" require="false" dataType="Compare" msg="年龄必须在18以上" to="18" operator="GreaterThanEq l"></td>
</tr>
   <tr>
   <td>电话：</td><td><input name="Phone" require="false" dataType="Phone" msg="电话号码不正确"></td>
</tr>
   <tr>
   <td>手机：</td><td><input name="Mobile" require="false" dataType="Mobile" msg="手机号码不正确"></td>
</tr>
     <tr>
   <td>生日：</td><td><input name="Birthday" dataType="Date" format="ymd" msg="生日日期不存在"></td>
</tr>
   <tr>
   <td>邮政编码：</td><td><input name="Zip" dataType="Custom" regexp="^[1-9]/d{5}$" msg="邮政编码不存在"></td>
</tr>
<tr>
   <td>邮政编码：</td><td><input name="Zip1" dataType="Zip" msg="邮政编码不存在"></td>
</tr>
<tr>
   <td>操作系统：</td><td><select name="Operation" dataType="Require" msg="未选择所用操作系统" ><option val="">选择您所用的操作系统</option><option val="Win98">Win98</option><option val="Win2k">Win2k</option><option val="WinXP">WinXP</option></select></td>
</tr>
<tr>
   <td>所在省份：</td><td>广东<input name="Province" val="1" type="radio">陕西<input name="Province" val="2" type="radio">浙江<input name="Province" val="3" type="radio">江西<input name="Province" val="4" type="radio" dataType="Group" msg="必须选定一个省份" ></td>
</tr>
<tr>
   <td>爱好：</td><td>运动<input name="Favorite" val="1" type="checkbox">上网<input name="Favorite" val="2" type="checkbox">听音乐<input name="Favorite" val="3" type="checkbox">看书<input name="Favorite" val="4" type="checkbox"" dataType="Group" min="2" max="3" msg="必须选择2~3种爱好"></td>
</tr>
   <td>自我介绍：</td><td><textarea name="Description" dataType="Limit" max="10" msg="自我介绍内容必须在10个字之内">中文是一个字</textarea></td>
</tr>
     <td>自传：</td><td><textarea name="History" dataType="LimitB" min="3" max="10" msg="自传内容必须在[3,10]个字节之内">中文是两个字节t</textarea></td>
</tr>
    <tr>
   <td>相片上传：</td><td><input name="up" dataType="Filter" msg="非法的文件格式" type="file" accept="jpg, gif, png"></td>
</tr>
<tr>
   <td colspan="2"><input name="Smit" type="smit" val="确定提交"><input onClick="Validator.Validate(document.getElementById(’demo’))" val="检验模式1" type="button"><input onClick="Validator.Validate(document.getElementById(’demo’),2)" val="检验模式2" type="button"><input onClick="Validator.Validate(document.getElementById(’demo’),3)" val="检验模式3" type="button"></td>
</tr>
</form>
</table>
</body>