jquery表單驗證控制項:Form-Validate例子

在做登入註冊模組的時候, 我們需要要求使用者按照我們的規則進行資訊的填寫, 如果直接在填寫完成之後提交的時候驗證這些資訊的話, 對於使用者來說不得不說是一個比較爛的體驗, form-validate控制項是一個超強大的表單驗證控制項, 包含了簡單的規則驗證, 非同步驗證等等, 並且該控制項可以自訂驗證規則.既方便又實用.

官網下載form-validate之後, 在頁面上引入jquery.validate.min.js檔案, 注意: 在這之前必須先引入Jquery庫;

<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.validate.min.js" type="text/javascript"></script>

需要驗證的Form表單元素

<div class="form-group">
    使用者名稱:<input type="text" id="username" name="username" />
</div>
<div class="form-group">
    密　碼:<input type="password" id="password" name="password" />
</div>
<div class="form-group">
    確認密碼:<input type="password" id="repassword" name="repassword" />
</div>
<div class="form-group">
    郵箱地址:<input type="text" id="email" name="email" />
</div>

定義一個js檔案,編寫驗證代碼

// 自訂驗證規則
// 驗證使用者名稱格式
jQuery.validator.addMethod("username", function(value, element) {  
    var user = /^[a-zA-Z][w]{4,16}$/;
    return this.optional(element) || (user.test(value));
}, "以字母開頭，5-17 字母、數字、底線'_'");

// 添加子使用者表單驗證
$('#addUser').validate({
    errorElement: 'span',     // 預設的錯誤資訊元素
    errorClass: 'help-block', // 預設的錯誤資訊類名
    focusInvalid: false,     // 未通過驗證的第一個表單元素獲得焦點

    // 基礎規則驗證
        rules : {
           username : {
               required : true,
               username : true,
           },
           password : {
               required : true,
               username : true
           },
           repassword : {
               required : true,
               equalTo : '#password'
           },
            email: {
                required: true,
                email: true,
                remote : {
                    url : 'checkEmail.php',
                    type : 'post',
                    dataType : 'json',
                    data : {
                        email : function () {
                            return $('#email').val();
                        }
                    }
                }
            }
        },

        // 提示資訊
        messages : {
           username : {
               required : '使用者名稱不可為空'
           },
           password : {
               required : '密碼不可為空'
           },
           repassword: {
                required: "確認密碼不可為空.",
                equalTo : '兩次密碼輸入不正確'
            },
            email: {
                required: "郵箱不可為空.",
                email: "請輸入正確格式的郵箱地址",
                remote: "該郵箱已經被註冊."
            }
        }
    });
});

至此一個完整的表單驗證就寫好了, 為了保證資料的嚴謹, 最好在後面提交的時候在進行一次驗證, 如果再配合驗證碼就更合適不過了.