from表單資料的合法性驗證是個很常見的需求，jQuery提供了一個外掛：jquery validate 官網下載。
　　　若想使用需先引用jquery.validate.js，並且要在jquery.js之後引用。

<script src="js/jquery.js"></script>
<script src="js/jquery.validate.js"></script>

　　　把現在寫的專案拿來演示一下，其使用了bootstrap框架。
　　　

<form class="form-horizontal" id="fillForm"
 
 action="javascript:void(0);">
                    <div class="form-group">
                        <label for="new_userName" class="col-md-2 control-label">暱稱</label>
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class
 
="input-group-addon">
                                    <span class="glyphicon glyphicon-user"></span>
                                </span>
                                <input type="text" id="new_userName" name="new_userName" class="form-control" placeholder="輸入新暱稱(暱稱確認後不可更改，4-10個字元)"
 
>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="new_userPwd" class="col-md-2 control-label">密碼</label>
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                </span>
                                <input type="password" id="new_userPwd" name="new_userPwd" class="form-control" placeholder="輸入密碼(5-15個字元)"/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="new_userPwd_twice" class="col-md-2 control-label">確認密碼</label>
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-lock"></span>
                                </span>
                                <input type="password" id="new_userPwd_twice" name="new_userPwd_twice" class="form-control" placeholder="請再次輸入密碼"/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="new_userEmail" class="control-label col-md-2">郵箱</label>
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-envelope"></span>
                                </span>
                                <input id="new_userEmail" name="new_userEmail" type="email" class="form-control" placeholder="輸入個人郵箱"/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="new_userPhone" class="control-label col-md-2">手機</label>
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-phone"></span>
                                </span>
                                <input type="text" id="new_userPhone" name="new_userPhone" class="form-control" placeholder="輸入個人手機號"/>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="new_userBirth" class="control-label col-md-2">生日</label>
                        <div class="col-md-8">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                                <input id="new_userBirth" name="new_userBirth" class="form-control" placeholder="選擇您的生日(1960~2012)" readonly />
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-md-2">性別</label>
                        <div class="radio col-md-8">
                            <label class="col-md-2">
                                <input type="radio" name="new_userGender" id="man" value="man">
                                男
                            </label>
                            <label class="col-md-2">
                                <input type="radio" name="new_userGender" id="woman" value="woman">
                                女
                            </label>
                            <label class="col-md-2">
                                <input type="radio" name="new_userGender" id="secret" value="secret" checked>
                                保密
                            </label>
                        </div>

                    </div>

                    <div class="form-group">
                        <label class="control-label col-md-2">院系</label>
                        <div class="col-md-8">
                            <div id="col_and_maj" class="input-group">
                                <div class="col-md-4">
                                    <select id="new_userCollege" name="new_userCollege" class="form-control col-md-3 prov"></select>
                                </div>
                                <div class="col-md-4">
                                    <select id="new_userMajor" name="new_userMajor" class="form-control col-md-3 city"></select>
                                </div>

                            </div>

                        </div>
                    </div>



                    <div class="form-group form-button">
                        <button type="reset" class="btn btn-default col-md-offset-8">重置</button>
                        <button id="fillFormSubmit" type="submit" class="btn btn-primary">確認</button>
                    </div>
                </form>

　　　html檔案跟平常一樣，主要在js中進行驗證：
　　　

$(function(){
jQuery.validator.addMethod("regUserName", function (value, element) {

        return this.optional(element) || /^[0-9]*[a-zA-Z_\u4e00-\u9fa5]+[0-9]*$/.test(value);

    }, "註冊暱稱為4-10位數字、下劃線、中文或英文字母，但不能全是數字");

    jQuery.validator.addMethod("isMobile", function(value, element) {

        var length = value.length;

        var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;

        return this.optional(element) || (length == 11 && mobile.test(value));

    }, "請正確填寫您的手機號碼");

    //登入帳號合法性驗證
    jQuery.validator.addMethod("logAccountCheck", function (value, element) {

        var length = value.length;

        var mobile = /^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/;

        return this.optional(element) || (length == 11 && mobile.test(value)) || /^[\u0391-\uFFE5\w]+$/.test(value);

    }, "暱稱不符合登入規則");

$("#fillForm").validate({
        errorElement: 'span',
        errorClass: 'help-block',
        focusInvalid: false,
        rules: {
            new_userName: {
                required: true,
                regUserName: true,
                minlength: 4,
                maxlength: 10
            },
            new_userPwd: {
                required: true,
                rangelength: [5, 15]
            },
            new_userPwd_twice: {
                required: true,
                equalTo: "#new_userPwd"
            },
            new_userEmail: {
                required: true,
                email: true
            },
            new_userPhone: {
                required: true,
                isMobile:true,
                digits: true,
                minlength: 11,
                maxlength: 11
            },
            new_userBirth: {
                required: true
            },
            new_userCollege: {
                required: true
            },
            new_userMajor: {
                required: true
            }
        },
        messages: {
            new_userName: {
                required: '暱稱不能為空',
                minlength: '暱稱最少為4位',
                maxlength: '暱稱最多為10位'
            },
            new_userPwd: {
                required: '密碼不能為空',
                rangelength: $.validator.format("密碼長度必須在 {0} 到 {1} 之間")
            },
            new_userPwd_twice: {
                required: '此項不能為空',
                equalTo: '兩次輸入的密碼必須一致'
            },
            new_userEmail: {
                required: '郵箱不能為空',
                email: '郵箱格式不正確(例如: [email protected])'
            },
            new_userPhone: {
                required: '電話號不能為空',
                digits: '電話號必須是數字',
                minlength: '電話號為11位',
                maxlength: '電話號為11位'
            },
            new_userBirth: {
                required: '生日不能為空'
            },
            new_userCollege: {
                required: '學院不能為空'
            },
            new_userMajor: {
                required: '專業不能為空'
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        success: function (label) {
            label.closest('.form-group').removeClass('has-error').addClass('has-success');
            label.remove();
        },
        errorPlacement: function (error, element) {
            element.parent('div').after(error);
        },

        submitHandler: function (form) {
            var result = {
                "new_userName": $("#new_userName").val(),
                "new_userPwd": $("#new_userPwd").val(),
                "new_userEmail": $("#new_userEmail").val(),
                "new_userPhone": $("#new_userPhone").val(),
                "new_userBirth": $("#new_userBirth").val(),
                "new_userGender": $("input[name='new_userGender']:checked").val(),
                "new_userCollege": $("#new_userCollege").val() + ',' + $("#new_userMajor").val()
            };
            result.new_userIP = ip;
            var res = JSON.stringify(result);
            alert(res);

            return false;
        }
    })

})

　　　簡單用法：
　　　1.：rules裡定義輸入框規則，常見的有required, minlength, maxlength, email, 其中使用輸入框的name屬性來指定輸入框。
　　　2：messages裡定義當輸入內容不符合規則時顯示的資訊，如果自定義則顯示預設的錯誤資訊。
　　　3：可以自定義規則，比如上面程式碼開頭部分定義了自定義規則，可以根據自己的需求仿照程式碼即可，而且網上也提供了現成的自定義驗證規則。
　　　4：當輸入框均符合規則時，可以點選提交，此時，會指定submitHandler函式，

　　　
　　　更詳細的使用教程可參考官網