前面的话
最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation。Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评。本文将详细介绍validation插件
概述
jQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言
作为一个标准的验证方法库,Validation拥有以下特点:
1、内置验证规则:拥有必填、数字、E-Mail、URL和信用卡号等19类内置验证规则
2、自定义验证规则:可以很方便地自定义验证规则
3、简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能
4、实时验证:可以通过keyup或blur事件触发验证
validation作为jQuery的一个插件,使用时需要同jQuery一起引入,注意要先引入jquery
<script src="/UploadFiles/2021-04-02/jquery-1.10.0.js">快速上手
validation功能强大且API众多,如果要快速上手,只要掌握常用功能即可
<form id="demoForm"> <p> <label for="username">用户名:</label> <input type="text" id="username" name="username"/> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password"/> </p> <p> <input type="submit" value="登录"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, minlength: 2, maxlength: 10 }, password:{ required: true, minlength: 2, maxlength:10 } } }) </script>上述代码主要对name为'username'和'password'这两个input控件进行了校验,这两个控件必须填写内容,且字符长度必须在2-10之间
校验规则
在快速上手的例子中,使用了required、minlength和maxlength这三个校验规则。实际上validation的校验规则有17个之多
序号 规则 描述 required:true 必须输入的字段 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值 email:true 必须输入正确格式的电子邮件 url:true 必须输入正确格式的网址 date:true 必须输入正确格式的日期,内部调用Date.parse()方法进行校验 dateISO:true 必须输入正确格式的日期(ISO),如:2009-06-23,1998/01/22 number:true 必须输入合法的数字(负数,小数) digits:true 必须输入整数 creditcard: 必须输入合法的信用卡号 equalTo:"#field" 输入值必须和 #field 相同 accept: 输入拥有合法后缀名的字符串(上传文件的后缀) maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符) minlength:10 输入长度最小是 10 的字符串(汉字算一个字符) rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符) range:[5,10] 输入值必须介于 5 和 10 之间 max:5 输入值不能大于 5 min:10 输入值不能小于 10下面使用一个更详细的例子,对上面的17个规则进行应用
<form id="demoForm"> <p> <label for="username">用户名:</label> <input type="text" id="username" name="username"/> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password"/> </p> <p> <label for="confirm-password">确认密码</label> <input type="password" id="confirm-password" name="confirm-password"/> </p> <p> <label for="email">电子邮件:</label> <input id="email" name="email"/> </p> <p> <label for="url">网址:</label> <input id="url" name="url"/> </p> <p> <label for="date">生日:</label> <input id="date" name="date"/> </p> <p> <label for="num">随机数(0-9):</label> <input id="num" name="num"/> </p> <p> <label for="card">信用卡号:</label> <input id="card" name="card"/> </p> <p> <input type="submit" value="登录"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, maxlength: 10 }, password:{ required: true, range:[5,10] }, 'confirm-password':{ equalTo: "#password" }, email:{ email:true }, url:{ url:true }, date:{ dateISO:true }, num:{ min:0, max:9 }, card:{ creditcard:true } } }) </script>默认提示
由上面的例子中看出,validate的默认提示是英文的
messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date ( ISO ).", number: "Please enter a valid number.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", maxlength: $.validator.format( "Please enter no more than {0} characters." ), minlength: $.validator.format( "Please enter at least {0} characters." ), rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ), range: $.validator.format( "Please enter a value between {0} and {1}." ), max: $.validator.format( "Please enter a value less than or equal to {0}." ), min: $.validator.format( "Please enter a value greater than or equal to {0}." ) }不过可以将其修改为中文,只要加入以下代码
$.extend($.validator.messages, { required: "这是必填字段", remote: "请修正此字段", email: "请输入有效的电子邮件地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入有效的日期 (YYYY-MM-DD)", number: "请输入有效的数字", digits: "只能输入数字", creditcard: "请输入有效的信用卡号码", equalTo: "你的输入不相同", extension: "请输入有效的后缀", maxlength: $.validator.format("最多可以输入 {0} 个字符"), minlength: $.validator.format("最少要输入 {0} 个字符"), rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"), range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"), max: $.validator.format("请输入不大于 {0} 的数值"), min: $.validator.format("请输入不小于 {0} 的数值") });使用方式
上面的例子中,validate控件的使用,都是通过使用validate()方法完成的,由于这种方法将HTML结构和javascript逻辑分离,使得代码更加优化
实际上,还有另一种方法就是通过添加HTML属性的方式或添加class类名的方式来进行验证,类似于HTML5新增的input类控件的功能
由于已经将验证规则添加到HTML元素中,所以调用validate()方法时,参数为空
<form id="demoForm"> <p> <label for="username">用户名:</label> <input type="text" id="username" name="username" class="required" minlength="2"/> </p> <p> <label for="email">电子邮件:</label> <input id="email" name="email" class="required email"/> </p> <p> <label for="url">网址:</label> <input id="url" name="url" class="url"/> </p> <p> <input type="submit" value="登录"/> </p> </form> <script> $('#demoForm').validate({}) </script>更改提示
无论是validate插件自带的英文提示,或者是其扩展的中文提示,可能与实际项目的需求不相符。这时,就需要我们对错误提示进行更改
而更改错误提示的方法也很简单,只需要使用validate()函数里的,messages()方法即可。如果某个控件没有使用messages()方法,则使用默认的错误提示信息。如下所示
在messages()方法中,{0}代表rules()方法当前规则的属性值
<form id="demoForm"> <p> <label for="username">用户名:</label> <input type="text" id="username" name="username" /> </p> <p> <label for="email">电子邮件:</label> <input id="email" name="email" /> </p> <p> <label for="url">网址:</label> <input id="url" name="url"/> </p> <p> <input type="submit" value="登录"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, minlength: 2, maxlength: 10 }, email:{ required: true, email:true }, url:{ required: true, url:true } }, messages:{ username:{ required:"请输入用户名", minlength:"至少输入{0}个字符" }, email:{ required:"请输入邮箱", email:"邮箱格式不正确" }, url:{ required:"请输入网址", url:"网址格式不正确(完整的网址应包括http://或https://)" } } }) </script>美化样式
实际上,validate插件输出错误信息的方式是通过增加一个label控件实现的,该label控件的id名为'输入控件的id名-error',类名为'error',且位于输入控件的右侧
下表中列出了关于错误信息的相关属性的方法
参数 类型 默认值 描述 errorClass String "error" 指定错误提示的css类名 errorElement String "label" 用什么标签标记错误 errorContainer Selector 无 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。如errorContainer: "#messageBox1, #messageBox2" errorLabelContainer Selector 无 把错误信息统一放在一个容器里面 wrapper String 无 用什么标签再把上边的errorELement包起来【成功样式】
validate插件有一个success()方法,用来设置要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个css类,也可跟一个函数
success:String,Callback
success: function(label) { label.html(" ").addClass("success"); } success: "success"但实际上,validate插件只是将label标签添加了一个'success'类,且原先的'error'类并没有删除。且经过实际测试,'error'类名无法删除,删除之后,每次验证成功时,validate插件都会自动再生成一个label标签
所以,success的效果无法正常使用,这应该是validate插件的一个bug
<style> label.error{background: no-repeat 0 4px;background-image:url('unchecked.gif');margin-left:6px;padding-left:14px;color:red;} </style> <body> <form id="demoForm"> <p> <label for="username">用户名:</label> <input type="text" id="username" name="username" /> </p> <p> <label for="email">电子邮件:</label> <input id="email" name="email" /> </p> <p> <label for="url">网址:</label> <input id="url" name="url"/> </p> <p> <input type="submit" value="登录"/> </p> </form> <script> $('#demoForm').validate({ rules:{ username:{ required: true, minlength: 2, maxlength: 10 }, email:{ required: true, email:true }, url:{ required: true, url:true } }, messages:{ username:{ required:"请输入用户名", minlength:"至少输入{0}个字符", maxlength:"最多输入{0}个字符" }, email:{ required:"请输入邮箱", email:"邮箱格式不正确" }, url:{ required:"请输入网址", url:"网址格式不正确(完整的网址应包括http://或https://)" } } }) </script>自定义验证
由于需求的需要,除提供的默认验证规则外,还需要自定义验证规则,满足业务需要。这时就需要使用addMethod()方法
【addMethod(】
addMethod(name,method,message)方法用来添加一个新的验证方法
参数 name 是添加的方法的名字。参数 method 是一个函数,接收三个参数 (value,element,param)。value 是元素的值,element 是元素本身,param 是参数
以验证手机号为例,手机号一般是11位,前3位是号段,后8位一般没有限制。而且,在手机开头很可能有0或+86
//开头 (0|\+86)"htmlcode">$.validator.addMethod({ 'phone', function(value,element,param){ var reg = /^(0|\+86)"htmlcode"><style> label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');} </style> <form id="demoForm"> <p> <label for="phone">手机号码:</label> <input type="text" id="phone" name="phone" /> </p> <p> <input type="button" value="提交"> </p> </form> <script> $.validator.addMethod( 'phone', function(value,element,param){ var reg = /^(0|\+86)"请输入手机号码" } } }) </script>修改触发方式
下面的虽然是 boolean 型的,但建议除非要改为 false,否则别乱添加
触发方式 类型 描述 默认值 onsubmit Boolean 提交时验证。设置为 false 就用其他方法去验证 true onfocusout Boolean 失去焦点时验证(不包括复选框/单选按钮) true onkeyup Boolean 在 keyup 时验证。 true onclick Boolean 在点击复选框和单选按钮时验证 true focusInvalid Boolean 提交表单后,未通过验证的表单会获得焦点 true focusCleanup Boolean 如果是true,当未通过验证的元素获得焦点时,移除错误提示 false远程校验
使用 ajax 方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项
[注意]远程地址只能输出 "true" 或 "false",不能有其他输出
remote: { url: "check-email.php", //后台处理程序 type: "post", //数据发送方式 dataType: "json", //接受数据格式 data: { //要传递的数据 username: function() { return $("#username").val(); } } }<style> label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');} </style> <form id="demoForm"> <p> <label for="num">请选择数字</label> <select name="num" id="num"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </p> <p> <input type="button" value="提交"> </p> </form> <script> $('#demoForm').validate({ rules:{ num:{ remote:"validateTest.php" } }, messages:{ num:{ remote:"选择的数字不正确" } } }); </script><"true"; }else{ echo "false"; } "_blank" href="https://jqueryvalidation.org/">官方网站最后介绍一个比较有趣的知识——validate、validation和validator,它们的中文意思是验证。validation插件的js文件名是validate.js,validation插件中最常用的方法就是validate()方法,基本上所有的验证操作都通过该方法进行。如果要进行自定义验证的话,则需要用到validator对象下的静态方法addMethod()
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。