jQuery插件之validation插件

最常使用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="https://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script> <script src="https://files.cnblogs.com/files/xiaohuochai/jquery.validate-1.13.1.js"></script>

快速上手

validation功能强大且API众多,如果要快速上手,只要掌握常用功能即可

<form> <p> <label for="username">用户名:</label> <input type="text"/> </p> <p> <label for="password">密码:</label> <input type="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> <p> <label for="username">用户名:</label> <input type="text"/> </p> <p> <label for="password">密码:</label> <input type="password"/> </p> <p> <label for="confirm-password">确认密码</label> <input type="password"/> </p> <p> <label for="email">电子邮件:</label> <input/> </p> <p> <label for="url">网址:</label> <input/> </p> <p> <label for="date">生日:</label> <input/> </p> <p> <label for="num">随机数(0-9):</label> <input/> </p> <p> <label for="card">信用卡号:</label> <input/> </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的默认提示是英文的

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwyxwz.html