jQuery Validate插件 验证实例

官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation

Validate手册： http://www.cnblogs.com/chutianshu1981/p/3602184.html

 

效果图：

引入库：

<script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/jquery-validate.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/register.js"></script>

表单：

<form action="" method='post' name='regis'>
    <p>
        <label for="account">登录账号：</label>
        <input type="text" name='account' id="account" autocomplete="off" />
    </p>
    <p>
        <label for="pwd">登录密码：</label>
        <input type="password" name='pwd' id="pwd"/>
    </p>
    <p>
        <label for="pwded">确认密码：</label>
        <input type="password" name='pwded' id='pwded'/>
    </p>
    <p>
        <label for="uname">昵 称：</label>
        <input type="text" name='uname' id="uname" />
    </p>
    <p>
        <label for="verify">验证码：</label>
        <input type="text" name="verify" id="verify" />
        <img src="#" alt="验证码图片" class="verify" id="verify-img" title="点击更换" />
    </p>
    <p>
        <input type="submit" value='立即注册' id='regis'/>
    </p>
</form>

register.js文件：

$(function () {

    //jQuery Validate表单验证

    /**
     * 添加验证方法: ok
     * 以字母开头，5-17 位字母、数字、下划线"_"
     */
    jQuery.validator.addMethod("ok", function(value, element) {
        var account = /^[a-zA-Z][\w]{4,16}$/;
        return this.optional(element) || (account.test(value));
    }, '以字母开头，5-17 位字母、数字、下划线"_"');

    $('form[name="regis"]').validate({

        // 验证规则
        rules:{
            account:{ //form表单中input[name='account']元素的验证规则
                required: true,                  //必须字段，不能为空
                ok: true,                        //启用自定义验证规则'ok'
                remote: {                        //异步验证
                    url: checkAccountUrl,        //后台处理程序
                    type: "post",                //数据发送方式
                    dataType: "json",            //接受数据格式
                    data: {                      //要传递的数据
                        account: function() {
                            return $("#account").val().trim();
                        }
                    }
                }
            },
            pwd:{
                required: true,
                ok: true,
            },
            pwded:{
                required: true,
                equalTo: '#pwd'
            },
            uname:{
                required: true,
                rangelength: [2, 10],
                remote: {
                    url: checkUnameUrl,
                    type: "post",
                    dataType: "json",
                    data: {
                        uname: function () {
                            return $("#uname").val().trim();
                        }
                    }
                }
            },
            verify:{
                required: true,
                remote: {
                    url: checkVerifyUrl,
                    type: 'post',
                    dataType: 'json',
                    data: {
                        verify: function () {
                            return $('#verify').val().trim();
                        }
                    }
                }
            }
        },

        // 提示消息
        messages:{
            account:{ //form表单中input[name='account']元素的提示信息
                required: '账号不能为空',            // 输入为空时提示
                remote: '账号已存在' // 异步获得json数据为'false'时提示，也就是后台验证失败
            },
            pwd:{
                required: '密码不能为空',
            },
            pwded:{
                required: '请确认密码',
                equalTo: '两次密码不一致'
            },
            uname:{
                required: '请填写您的昵称',
                rangelength: '昵称必须在{0}-{1}个字之间',
                remote: '昵称已存在'
            },
            verify:{
                required: '请输入验证码',
                remote: '验证码有误'
            }
        },

        // 错误标签元素
        errorElement: 'span',

        // 错误提示位置
        errorPlacement: function (error, element) { // error是错误信息的提示元素，element是当前input域
            error.appendTo(element.parent()).prev('.success').remove(); //追加提示元素，去掉之前的成功元素
        },

        // 验证通过
        success: function (span) { // span 是错误的提示元素
            span.removeClass('error').addClass('success').siblings('.success').remove(); //追加成功样式，去掉错误样式和重复的成功样式
        }
    });

})

errorElement 的CSS样式：

input.error{ /*...*/ }     /* 输入框  的错误样式 */
input.valid{ /*...*/ }     /* 输入框  的成功样式 */
span.error{ /*...*/ }      /* 提示元素的错误样式 */
span.success{ /*...*/ }    /* 提示元素的成功样式 */