赵工的个人空间


网络课堂部分转网页计算部分转编程演练

 JS函数库使用技巧

首页 > 网络课堂 > JS函数库使用技巧 > jQuery表单验证引擎
jQuery表单验证引擎

表单输入可以接收各种数据,有时候需要规定特定的格式,比如email、date等,这时就需要对输入的数据进行验证,确认输入的格式是否符合相应的数据格式。HTML5中已经加入了一些新的数据输入类型,但并没有获得所有浏览器的支持,而且也只有有限的数据类型,一般需要使用加入JavaScript代码进行前端验证,或者在服务器端用PHP、Java、C#等进行服务器端验证。

网上也有一些用于表单输入验证的插件,比如jQuery验证引擎,网址:https://github.com/posabsolute/jQuery-Validation-Engine。jQuery验证引擎提供了丰富功能的备选项,使用标记驱动。示例:

<input type="text" data-validation-engine="validate[required,custom[email]]"/>

其中,data-validation-engine将为此字段定义功能,required表示该字段应该被验证,而验证规则被定义在这个数组值,示例中表示要符合email正则表达式。为此,使用时需要实例化验证引擎:

$(".my-form").validationEngine();

如果格式不正确,将会触发错误消息。不过错误消息的样式只有一种,如果要更改样式需要改变这个js库中的定义。

jQuery验证引擎提供了大量预定义的正则表达式规则,用于常用的表单输入数据验证,其他常用的验证规则有:

<input type="text" data-validation-engine="validate[custom[utl]]"/>
<input type="text" data-validation-engine="validate[custom[phone]]"/>
<input type="text" data-validation-engine="validate[custom[number],min[9],max[10]]"/>
<input type="text" data-validation-engine="validate[custom[date],past[NOW]]"/>
<input type="text" data-validation-engine="validate[custom[date],future[NOW]]"/>
<input type="text" data-validation-engine="validate[custom[date],past[1995-01-01]]"/>
如果使用的是表单的日期选择器,并使用jQuery验证引擎,为了避免二者之间的冲突,需要表单中加入novalidate属性:
<form novalidate>
  <input type="date" data-validation-engine="validate[custom[date],past[1995-01-01]]"/>
</form>

jQuery验证引擎还可以使用条件验证,允许在表单的不同字段之间建立一种复杂的关系。比如验证输入的密码和确认密码是否一致:
<input type="password" name="my-password"/>
<input type="password" name="confirm-password" data-validation-engine="validate[equals[my-password]]"/>

可以验证多个字段之间的日期关系,比如:
<input type="text" name="start-date" data-validation-engine="validate[future[NOW]]"/>
<input type="text" name="end-date" data-validation-engine="validate[future[start-date]]"/>

还可以在客户端自定义验证规则,比如创建一个水果数组,如果输入值不在数组中就返回一条错误消息:
<input type="text" data-validation-engine="validate[funcCall[checkFruit]]"/>
其中使用的函数checkFruit需要自定义:
function checkFruit(field,rules,i,options){
  var fruits=["apple","banana","pear","orange"];
  if(fruits.indexOf(field)==-1){
    return "Must be a piece if fruit";
  }
}

使用jQuery验证引擎,甚至可以使用ajax方式调用服务器端的数据,比如检查用户名是否存在:
<input type="text" name="my-username" data-validation-engine="validate[ajax[ajaxUsername]]"/>
其中的ajaxUsername规则为:
"ajaxUsername":{
  "url":"my-api-url",
  "extraDataDynamic":['#my-username'],
  "alertText":"* This username is already taken",
  "alertTextOk":"All good!",
  "alertTextLoad":"* Validating, please wait"
},
需要将上述代码加入jquery.validationEngine-en.js中,其中定义了一些参数,如API的URL、传入的表单数据和各种消息,extraDataDynamic是一个希望传入到API中的id字段引用的列表。服务器端需要加入相关代码,并返回下面格式的JSON:
["my-username",false,"No dice"]
其中,my-username是字段的id引用,如果验证多个字段则使用嵌套数组;false表示验证是否通过;No dice是可选的错误消息,将覆盖原jquery.validationEngine-en.js中创建的消息。

jQuery验证提供了一些自定义错误消息方式,可以改写默认的消息样式,也可以加入额外的语音包。比如,可以通过使用data-errormessage属性来覆盖jQuery验证引擎中的默认消息:
<input type="email" data-validation-engine="validate[required,custom[email]]" data-errormessage="This is a custom errormessage"/>
还可以使用其他一些额外的错误消息特性:
<input type="email" data-validation-engine="validate[required,custom[email]]"
  data-errormessage-value-missing="Email is required!"
  data-errormessage-custom-error="Let me give you a hint:someone@nowhere.com"
  data-errormessage="This is a custom errormessage"/>
然后,脚本将使用data-errormessage-value-missing作为required验证的错误消息,使用data-errormessage-custom-error作为所有自定义正则表达式验证的错误消息,所有其他的错误默认都将使用data-errormessage中的消息。

为了使用jQuery验证引擎,需要引入jQuery和jquery-validationEngine.js脚本文件。验证引擎还支持多语言,使用时需要引入相应的语言脚本,但其中不包括中文的。

Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659