jQuery学习笔记-Validation表单验证插件

来源：互联网发布：结婚照相册制作软件编辑：程序博客网时间：2024/06/05 04:37

我天，昨天还被正则表达式搞得晕头转向呢，今天就发现了validation这个强大的插件，不明觉厉，感觉利用好各种插件真的是节省脑容量啊。好吧，也或许是初接触的我还没有意识到插件的不方便之处，不管，先整理一波。表单验证的神器！

Validation官网下载：http://plugins.jquery.com/validation/。下载后在html文件里引入js就可以用了。

基本API：

两个重要的概念：method：验证方法，指的是校验的逻辑。

rule：验证规则，指的是元素和验证方法的关联。

validate方法：定义了基本的校验规则和一些有用的配置项

例如：debug：true：表单就不会提交了，适合调试。

基本验证方法：required 必填；remote 远程校验；

minlength 最小长度；maxlength 最大长度；rangelength 长度范围；

min 最小值；max 最大值；range 值范围；

email Email格式；url URL格式；date 日期；dateISO ISO日期；number 数字；digits 整数；equalTo 与另一个元素值相等

高级API：valid() 方法；rules() 方法；

Validator对象方法： Validator.form() 验证表单是否有效，返回true/false；

Validator.element(element) 验证某个元素是否有效，返回true/false；

Validator.resetForm() 把表单恢复到验证前原来的状态；

Validator.showErrors(errors) 针对某个元素显示特定的错误信息；

Validator.numberOfInvalids() 返回无效的元素数量

还有Validate()方法的配置项就不再一个个列举了，有需要可以去官方文档查询。直接上栗子吧。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>jQuery Validation 插件</title>    <link rel="stylesheet" href="style.css"/></head><body><form id="demoForm">    <fieldset>        <legend>用户登录</legend>        <p id="info"></p>        <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>            <input type="submit" value="登录"/>        </p>    </fieldset></form><script src="vendor/jquery-1.10.0.js"></script><script src="vendor/jquery.validate-1.13.1.js"></script><script>    var validator1;    $(document).ready(function () {        validator1 = $("#demoForm").validate({            debug: true,  //表单不会提交，只会检查            rules: {                username: {                    required: true,                    minlength: 2,                    maxlength: 10                },                password: {                    required: true,                    minlength: 2,                    maxlength: 16                },                "confirm-password": {                    equalTo: "#password"                }            },            messages: {                username: {                    required: '请输入用户名',                    minlength: '用户名不能小于2个字符',                    maxlength: '用户名不能超过10个字符',                    remote: '用户名不存在'                },                password: {                    required: '请输入密码',                    minlength: '密码不能小于2个字符',                    maxlength: '密码不能超过16个字符'                },                "confirm-password": {                    equalTo: "两次输入密码不一致"                }            },            highlight: function(element, errorClass, validClass) {                $(element).addClass(errorClass).removeClass(validClass);                $(element).fadeOut().fadeIn();            },            unhighlight: function(element, errorClass, validClass) {                $(element).removeClass(errorClass).addClass(validClass);            },            submitHandler: function (form) {                console.log($(form).serialize())            }        });        $("#check").click(function () {            console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");        });    });</script></body></html>

0 0