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;
                        }
                    }