jQuery Validate驗證框架詳解

入門資料 http://www.cnblogs.com/linjiqin/p/3431835.html
api  http://www.runoob.com/jquery/jquery-plugin-validate.html

 

jquery validate和bootstrap結合使用例子

 

<form id="form4" role="form" class="form-horizontal" method="get">
    <div class="panel-body widget-content">
        <div class="form-group">
            <label class="col-sm-3 control-label" for="rule1">規則1：</label>
            <div class="col-sm-8">
                <input class="form-control"  name="rule1" placeholder="必填項"/>
            </div>
            <h4><span class="text-danger">*</span></h4>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="rule2">規則2：</label>
            <div class="col-sm-8">
                <input class="form-control"  name="rule2" placeholder="必填項，長度3-5"/>
            </div>
            <h4><span class="text-danger">*</span></h4>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="rule3">規則3：</label>
            <div class="col-sm-8">
                <input class="form-control"  name="rule3" placeholder="必填項，長度3-5，必須包含漢字"/>
            </div>
            <h4><span class="text-danger">*</span></h4>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="rule4">規則4：</label>
            <div class="col-sm-8">
                <input class="form-control"  name="rule4" placeholder="非必填項。只能輸入數字，數值不能大於5"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="rule5">規則5：</label>
            <div class="col-sm-8">
                <input class="form-control"  name="rule5" placeholder="必填項。必須包含數字和字母漢字和特殊字符，長度大於3"/>
            </div>
            <h4><span class="text-danger">*</span></h4>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="rule6">規則6：</label>
            <div class="col-sm-8">
                <input class="form-control"  name="rule6" placeholder="必填項。必須輸入整數，大小在0到300之間"/>
            </div>
            <h4><span class="text-danger">*</span></h4>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="rule7">規則7：</label>
            <div class="col-sm-8">
                <input class="form-control"  name="rule7" placeholder="必填項，大於100。遠程校驗，ajax返回true校驗通過"/>
            </div>
            <h4><span class="text-danger">*</span></h4>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" for="rule8">規則8：</label>
            <div class="col-sm-8">
                <input class="form-control"  name="rule8" placeholder="必填項，必須以字母開頭"/>
            </div>
            <h4><span class="text-danger">*</span></h4>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <button type="submit" class="btn btn-primary btn-sm">注冊</button>
                <button type="reset" class="btn btn-primary btn-sm">重置</button>
            </div>
        </div>
    </div>
    <div class="panel-footer widget-footer">
        <script type="text/javascript" class="_bs">
            $(function(){
                $.validator.setDefaults({
                    highlight: function (element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); },
                    success: function (element) { element.closest('.form-group').removeClass('has-error').addClass('has-success'); },
                    errorPlacement: function (error, element) { error.appendTo(element.closest("[class^='col-']")); },
                    errorElement: "span", errorClass: "help-block", validClass: "valided", ignore:".ignore"
                });
                
                $.validator.addMethod("mustNum", function(value, element) {
                    if (!/[0-9]/.test(value))
                        return false;
                    return this.optional(element) || true;
                }, "必須包含數字");

                $.validator.addMethod("mustletter", function(value, element) {
                    if (!/[a-zA-z]/.test(value))
                        return false;
                    return this.optional(element) || true;
                }, "必須包含字母");

                $.validator.addMethod("musthanzi", function(value, element) {
                    return this.optional(element) || /[\u4e00-\u9fa5]/.test(value);
                }, "必須包含漢字");

                $.validator.addMethod("startLetter", function(value, element) {
                    return this.optional(element) || /^[a-zA-Z]/.test(value);
                }, "必須以字母開頭");

                $.validator.addMethod("mustxxx", function(value, element) {
                    return this.optional(element) || /[^a-zA-Z0-9\u4e00-\u9fa5]/.test(value);
                }, "必須包含特殊字符");

                $("#form4").validate({
                    rules : {
                        rule1 : "required",
                        rule2 : {
                            required : true,
                            rangelength:[3,5]
                        },
                        rule3 : {
                            required : true,
                            minlength:3,
                            maxlength:5,
                            musthanzi:true
                        },
                        rule4 : {
                            max:5
                        },
                        rule5 : {
                            required : true,
                            mustNum:true,
                            mustletter:true,
                            mustxxx:true,
                            musthanzi:true,
                            minlength:3
                        },
                        rule6 : {
                            required:true,
                            digits:true,
                            range:[0,300]
                        },
                        rule7 : {
                            required:true,
                            remote: {
                                url: "check.php",     //后台處理程序
                                type: "post",               //數據發送方式
                                dataType: "json",        //接受數據格式   
                                data: {       //要傳遞的數據
                                    username: function() {
                                        return $("input[name='rule7']").val();
                                    }
                                }
                            }
                        },
                        rule8 : {
                            required:true,
                            startLetter:true
                        },
                    },
                    messages : {
                            rule7 : {
                                remote : "遠程返回錯誤",
                            },
                            rule8 : {
                                required : "這里是自定義的必填項",
                            },
                        }
                });
            });
        </script>
    </div>
    </form>