validate.js页面验证js使用方法

作者:  最后修改:2014年01月27日  浏览数:1368

1 简介

  validate.js包含三个主要的构造: FormValidatorInputValidatorBaseValidator构造会new一个对象,对有限属性进行覆盖:

  FormValidator是表单的验证构造,需要两个参数,第一个为表单元素,第二个为构造的参数列表(是一个JSON对象会覆盖掉该对象中的同名属性)。

  InputValidator 是表单元素的验证构造,有三个参数,第一个参数为该对象的宿主对象(元素所在的form对象,如果传入Null则会自动查找所在form),第二个参数为表单元素,第三个参数为构造属性(是一个JSON对象会覆盖掉该对象中的同名属性)。

  BaseValidator为所有验证规则的基础构造,构造包含两个参数第一个参数为验证规则的宿主对象(一般为InputValidator),第二个参数是验证规则的参数列表对象(是一个JSON对象会覆盖掉该对象中的同名属性)。

  在使用时不需要手动调用构造参数,框架已将构造过程嵌入到了JQuery对象中,只需要用JQuery查找到对象,然后调用elementValidator方法(或同名方法initValidator)就会根据元素类型(tagName是否form)获得相应的对象(FormValidatorInputValidator),方法需要一个参数用来覆盖掉对象中的默认成员。

  需要使用InputValidator对象的addValidator方法构造BaseValidator对象,addValidator包含两个参数第一个参数为验证规则名称(必须是已注册的验证规则),第二个参数是用来覆盖掉验证规则对象默认成员的JSON对象,关于注册规则将在最后说明。

 

2. 使用方法

 

2.1 初始化验证的表单

  在页面的load事件中调用$("#表单ID").elementValidator(或同名方法initValidator),该方法参数为JSON Object

  $("#sForm").elementValidator({

  autoSubmit : true,//验证通过后是否自动提交表单(默认为true,自动提交)

  failStop:false,//验证表单项时 某一元素验证失败是否终止验证程序(默认为false,每次表单验证都会验证全部元素)

  exceptionFail:true,//验证过程中出现异常是否标记为验证失败(默认为true)

  beforeValidate:false,//在验证之前执行的方法,如果该方法返回false则不再进行验证,并返回false

  onFail:function(callback){},//验证失败会调用的方法,默认是一个空方法

  onVali:function(callback){}//验证通过会调用的方法,默认是一个空方法

  });

  //****参数不填均为默认值

 

2.2 初始化需要验证的表单项

  在页面的load事件中调用$("#元素ID").elementValidator(或同名方法initValidator) ,该方法参数为JSON Object,调用该方法会返回一个InputValidator对象,然后通过该对象的addValidator(RuleName,{/*RuleOption*/})方法添加验证规则

  (不需要的参数不要填写填写之后便会覆盖掉默认的值,以下均为默认值)

  $('#Email').initValidator({

  autoBind :true,//是否自动绑定验证到元素的事件(会绑定change,focus,blur,changeblur时会进行验证)

  msgTarget : 元素ID + "_tip",//验证反馈元素的ID,用来显示验证结果,默认为元素ID + "_tip"

  readyMsg  "",//初始状态消息

  focusMsg: "",//获取焦点后的消息

  validMsg  "",//验证通过后的消息

  waitMsg  "",//等待状态的消息

  errorMsg  "",//验证错误的消息

  againMsg  "",//重试的消息

  readyClass: 'validation-ready',//初始状态的CSS样式

  errorClass  'validation-error',//错误状态的CSS样式

  focusClass:'validation-focus',//获取焦点的CSS样式

  validClass:'validation-valid',//验证通过的CSS样式

  waitClass  'validation-wait',//等待状态的CSS样式

  againClass  'validation-error',//需要重试的CSS样式

  allowEmpty  false//是否允许为空当设置为true如果元素的值未填则不会进行验证,并设置该元素的验证状态为通过

  affected null,//affected元素的change事件会影响到该元素的状态状态取决于affectState的值

  affectState:"ready",//默认为ready状态

  showMsg : function(state, message{//显示该元素验证消息的方法,会覆盖掉默认显示消息方法,如果使用默认的显示消息方法,请确保不要包含该条属性

  message message || this[state "Msg"];

  var msgTarget $("#" this.msgTarget);

  msgTarget.removeClass().addClass(this[state "Class"]).html(message);

  },

  }).addValidator('NotNull', {//添加非空验证

  errorMsg : '请输入邮箱地址'

  }).addValidator('Email', {//添加邮箱格式验证

  errorMsg : '邮箱格式错误,请重新输入'

  }).addValidator('URLValue', {//添加URL资源文本验证

  url : 'validate',

  sendData : {

  'type' : 'email'

  },

  sendKey : 'Email',

  eqValue : 'false',

  errorMsg : '该邮箱已被注册,请重新输入'

  });

 

2.3 默认已实现的验证规则

  (1)NotNull (非空验证)

  参数:

  autoTrim 是否在验证前执行Trim操作(去除文本两端半角空格默认为false

 

  (2)RegExp 正则表达式验证

  参数

  autoTrim 是否在验证前执行Trim操作(去除文本两端半角空格默认为false

  regex  正则表达式(字符串)

  attr  可选的字符串,包含属性 "g""i" 和 "m",分别用于指定全局匹配、区分大小写的匹配和多行匹配

 

  (3)Email 邮箱格式验证

  参数:

  autoTrim 是否在验证前执行Trim操作(去除文本两端半角空格默认为false

  errorMsg 默认:"电子邮箱格式错误"

  Regex 默认: "^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)+$"

 

  (4)Length 长度校验

  参数

  min最小长度(-1为不限)

  max最大长度(-1为不限)

  lable提示时的标识名称(比如该值如果是用户名,当元素值不满足条件会提示:用户名长度应大于或小于xx个字符)

 

  (5)Equals 对比校验

  参数:

  eqElement: '', //比较的元素(优先级大于eqValue)

  eqValue: '', //比较的值(eqElement不为空时不会比较该值)

 

  (6)URLValue URL资源对比(该校验可以做页面 验证码,用户名是否存在等ajax校验)

  参数:

  isSync: false, //是否同步模式

  url: "", //URL

  method: "post", //提交方式

  sendData: {}, //提交的值

  sendKey: "", //提交URL请求时,使用的数据name

  eqValue: "", //对比值-将请求URL得到的文本与该值对比

 

  (7)Attr 属性校验(校验元素的属性值)

  参数:

  attr: "value", //属性名称

  eqValue: null, //属性对比值

  val: function(input){//默认的获取属性值的方法

  return $(input).attr(this.attr);

  }

 

  (8)Number 数值验证(数值大小不能超出JS的数值范围-1.7976931348623157e+308 ~ 1.7976931348623157e+308)

  参数:

  onlyInt: false, //是否验证为整数

  min: null, //最小值(默认null为不限制)

  max: null, //最大值(默认null为不限制)

 

  (9)Int 整数验证(继承至Number 验证)

  属性:

  onlyInt: true

 

  (10)Function Function验证

  参数:

  func: "",字符串或function对象,该方法需要返回Booleantruefalse

  root: window,function属性为字符串的时候将会在该对象下根据func的值查找function,如果查找不到则提示:验证方法(" + func + ")未找到

 

2.4 注册验证规则

  使用$.validation.regRules方法注册验证规则,该方法有三个参数:

  参数1:验证规则名称,比如:Email,NumberNotNull;

  参数2:验证规则属性,需要包含 doValidate: function(input, waitToDo){}的函数实现,该方法返回true,false,或'wait','again'表示验证成功,验证失败,等待,重试,该方法包含两个参数,参数input表示验证的页面元素,waitToDo是在异步验证回调时使用;

  参数3(可选):该验证规则继承来源,表示该验证规则继承至另一个验证规则,可以使用this.superDoValidate得到父验证规则的验证方法,并可以使用父验证规则的属性。

  举例:URLValue验证,

 

2.5 页面使用示例

  ZAS注册页面

<z:config type="zas" name="注册模板"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>用户注册</title>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/validate.js"></script>
<script>
$(function() {
var enableUserNameCN = $("#EnableUserNameCN").val();
var regex = '^[a-zA-Z0-9_]*$';
var errorMsg = '只能使用英文、数字、下划线';
var focusMsg = '4~24位字符,可使用英文、数字、下划线';
if(enableUserNameCN=='Y'){
regex = '^[a-zA-Z0-9_\u4e00-\u9fa5]*$';
errorMsg = '只能使用英文、数字、中文、下划线';
focusMsg = '4~24位字符,可使用英文、数字、下划线、中文';
}
$('#registerForm').initValidator({
autoSubmit:true,
});
$('#UserName').initValidator({
readyMsg : '必填',
focusMsg : focusMsg,
msgTarget : 'tipname'
}).addValidator('NotNull', {
errorMsg : '请输入用户名'
}).addValidator('Length', {
min : 4,
max : 24,
errorMsg : '至少使用4位字符'
}).addValidator('RegExp', {
regex : '^(?!_)(?!.*?_$)',
errorMsg : '不能以下划线开头或结尾'
}).addValidator('RegExp', {
regex : regex,
errorMsg : errorMsg
// regex : '^[a-zA-Z0-9_]*$',
// errorMsg : '只能使用英文、数字、下划线'
}).addValidator('URLValue', {
url : 'validate',
eqValue : 'false',
sendData : {
'type' : 'username'
},
sendKey : 'UserName',
errorMsg : '该用户名已被使用,请重新输入。如果您拥有该用户名,请立即<a href="${contextPath}${sso_login}" style="color:red;">登录</a>'
});
 
$('#Password').initValidator({
readyMsg : '必填',
focusMsg : '6-16位字符,区分大小写',
msgTarget : 'tippassword'
}).addValidator('NotNull', {
errorMsg : '请输入密码'
}).addValidator('Length', {
min : 6,
max : 16,
errorMsg : '密码应为6-16位字符,区分大小写'
});
 
$('#pwdok').initValidator({
readyMsg : '必填',
focusMsg : '请再次输入密码',
msgTarget : 'tippwdok',
affected : '#Password',
affectState : 'focus'
}).addValidator('NotNull', {
errorMsg : '请输入确认密码'
}).addValidator('Equals', {
eqElement : '#Password',
errorMsg : '两次输入的密码不一致,请重新输入'
});
 
$('#Email').initValidator({
readyMsg : '必填',
focusMsg : '请输入您的常用邮箱,以便密码丢失时找回密码',
msgTarget : 'tipemail'
}).addValidator('NotNull', {
errorMsg : '请输入邮箱地址'
}).addValidator('Email', {
errorMsg : '邮箱格式错误,请重新输入'
}).addValidator('URLValue', {
url : 'validate',
sendData : {
'type' : 'email'
},
sendKey : 'Email',
eqValue : 'false',
errorMsg : '该邮箱已被注册,请重新输入'
});
 
$('#AuthCode').initValidator({
readyMsg : '必填',
focusMsg : '请输入验证码',
msgTarget : 'tipauthcode'
}).addValidator('NotNull', {
errorMsg : '请输入验证码'
}).addValidator('URLValue', {
url : 'validate',
sendData : {
'type' : 'authcode'
},
sendKey : 'AuthCode',
eqValue : 'true',
errorMsg : '验证码错误,请重新输入'
});
 
$("#Checkbox").initValidator({
readyClass:'',
focusClass:'',
validClass:'',
msgTarget : 'tipcheckbox'
}).addValidator("Attr",{
errorMsg : '请先阅读并接受《用户注册协议》',
attr:'checked'
});
});
 
function initAuthCode() {
$('#AuthCode').attr('value', '');
}
 
</script>
</head>
<body>
 
<z:include file="${template}header.zhtml"/>
<div class="main pageWidth">
<input type="hidden" name="EnableUserNameCN" id="EnableUserNameCN" value="${EnableUserNameCN}" />
<form id="registerForm" name="registerForm" method="post">
<input type="hidden" name="Referer" id="Referer" value="${Referer}" />
<input type="hidden" name="Type" id="Type" value="register" />
<div class="mod_com">
<div class="mod_comtitle"><h2>用户注册</h2></div>
<div class="mod_mainbox">
<table width="740" border="0" cellspacing="0" cellpadding="0" class="registerWrap_mainboxtable">
<tbody>
<z:if condition="${EnableUserNameCN=='Y'}">
<tr>
<td width="96" align="right">用户名:</td>
<td colspan="2" align="left"><input type="text" id=UserName name="UserName" class="logintext1" maxlength="24"></td>
<td width="500" align="left"><span id="tipname" class="validation-ready"></span></td>
</tr>
</z:if>
<z:else>
<tr>
<td width="96" align="right">用户名:</td>
<td colspan="2" align="left"><input type="text" id=UserName name="UserName" class="logintext1" maxlength="24"></td>
<td width="420" align="left"><span id="tipname" class="validation-ready"></span></td>
</tr>
</z:else>
<tr>
<td align="right">密 码:</td>
<td colspan="2" align="left"><input type="password" id="Password" name="Password" class="logintext1" maxlength="16"/></td>
<td align="left"><span id="tippassword" class="validation-ready"></span></td>
</tr>
<tr>
<td align="right">确认密码:</td>
<td colspan="2" align="left"><input type="password" id="pwdok" name="pwdok" class="logintext1" maxlength="16"/></td>
<td align="left"><span id="tippwdok" class="validation-ready"></span></td>
</tr>
<tr>
<td align="right">邮 箱:</td>
<td colspan="2" align="left"><input type="text" id="Email" name="Email" class="logintext1" maxlength="80"/></td>
<td align="left"><span id="tipemail" class="validation-ready"></span></td>
</tr>
<tr>
<td width="200" align="right">工作(扩展):</td>
<td colspan="2" align="left"><input type="text" id=job name="MetaValue_job" class="logintext1" maxlength="24"></td>
<td width="420" align="left"><span id="tipname" class="validation-ready"></span></td>-->
</tr>
<tr>
<td align="right">验证码:</td>
<td width="157" align="left"><input type="text" id="AuthCode" name="AuthCode" class="logintext2" maxlength="10"/></td>
<td width="89" align="left"><img id="authcode" src="${contextPath}authCode.zhtml" onclick="$('#authcode').attr('src','authCode.zhtml?'+new Date().getTime());initAuthCode();return false;" style="vertical-align:middle; margin-left:4px;"/></td>
<td align="left"><label for="authcode">看不清?换一张</label>&nbsp;&nbsp;&nbsp;<span id="tipauthcode" class="validation-ready"></span></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td colspan="2" align="left" valign="bottom"><input type="checkbox" id="Checkbox" name="Checkbox">我已经阅读并接受《<span><a href="${contextPath}protocal" class="blue" target="_blank">用户注册协议</a></span>》</td>
<td align="left"><span id="tipcheckbox"></span></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td colspan="3" align="left" style="padding-top:20px;"><input type="submit" class="linkbtn" value="立即注册"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
 
<z:include file="${template}footer.zhtml"/>
</body>
</html>
 
附(validate.js源码):