jquery表单验证框架 jquery.validate.min.js的使用

jquery表单验证框架 jquery.validate.min.js的使用

http://www.cnblogs.com/linjiqin/p/3431835.html

                        <form id="formId" class="form-horizontal" action="${pageContext.request.contextPath}/loginUser/add?r=userList" method="post">
                            <input type="hidden" name="token" value="${token}" />
                            <div class="form-group">
                                <label class="col-sm-2 control-label">用户名：</label>
                                <div class="col-sm-6">
                                    <input type="text" class="form-control col-sm-4" id="username" name="username" style="width: 250px">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">密码：</label>
                                <div class="col-sm-6">
                                    <input type="password" class="form-control col-sm-4" id="password" name="password" style="width: 250px">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别：</label>
                                <div class="col-sm-5">
                                    <input id="id-button-borders" checked="" name="sex" type="checkbox" class="ace ace-switch ace-switch-4" />
                                    <span class="lbl middle" data-lbl="男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
														&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;女"></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-2 col-md-9">
                                    <button class="btn btn-info btn-sm" type="submit" >
                                        <i class="ace-icon fa fa-check bigger-110"></i>
                                        提交
                                    </button>

                                    &nbsp; &nbsp; &nbsp;
                                    <button class="btn btn-sm" type="reset">
                                        <i class="ace-icon fa fa-undo bigger-110"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>

js

<script type="text/javascript">

    $().ready(function() {
        // 在键盘按下并释放及提交后验证提交表单
        $("#formId").validate({
            submitHandler:function(form){
                // alert("submit!");
                form.submit();
            },
            rules: {
                username: {
                    required: true,
                    checkCode:true,//自定义表达验证
                    minlength: 3,
                    maxlength: 16,
                    remote: { //异步校验
                        type: "post",
                        url: "/loginUser/checkUser",
                        data: {
                            username: function() {
                                return $("#username").val();
                            }
                        },
                        dataType: "html",
                        dataFilter: function(data, type) {
                            if (data.code==0)
                                return false;
                            else
                                return true;
                        }
                    }
                },
                password: "required",
            },
            messages: {
                username: {
                    required: "请输入用户名，3-16个字符",
                    minlength: "用户名长度不能小于3个字符",
                    maxlength: "用户名长度不能大于16个字符",
                    remote: "用户名已存用"
                },
                password: "请输入输入密码",
            }
        });

        //自定义正则表达式验证方法
        $.validator.addMethod("checkCode",function(value,element,params){
            var checkCode = /^[0-9a-zA-Z_]{1,}$/;
            return this.optional(element)||(checkCode.test(value));
        },"用户名由字母数字下划线组成！");
    });
</script>

自定义正则表达式验证

        //自定义正则表达式验证方法
        $.validator.addMethod("checkCode",function(value,element,params){
            var checkCode = /^[0-9a-zA-Z_]{1,}$/;
            return this.optional(element)||(checkCode.test(value));
        },"用户名由字母数字下划线组成！");

jQuery.validate的optional(element)，用于表单控件的值不为空时才触发验证
使用

				省略...
                username: {
                    	...省略
                    checkCode:true,
					...省略
                }

异步验证

                    remote: { //异步校验
                        type: "post",
                        url: "/loginUser/checkUser",
                        data: {
                            username: function() {
                                return $("#username").val();
                            }
                        },
                        dataType: "html",
                        dataFilter: function(data, type) {
                            if (data.code==0)
                                return false;
                            else
                                return true;
                        }
                    }