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{ /*...*/ }    /* 提示元素的成功樣式 */