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>