jquery.validate不使用submit提交，而是使用button按鈕提交

JavaScript部分：

$(function() {
    //表單驗證
    $("#addUserInfo").validate({
        rules: {
            username: {
                required: true,
                minlength: 2,
                //異步驗證 開始
                remote: {
                    url: "userManage/username.validate",//發送請求的url地址
                    type: "post", //請求方式
                    dataType: "json",//接收的數據類型
                    data: {
                        username: function () {
                            return $("#username").val();
                        }
                    },
                    dataFilter: function (data, type) { //過濾返回結果
                        if (data == "true")
                            return true;  //true代表用戶名還未存在
                        else
                          return false; //false代表用戶名已經存在
                    }
                }
                //異步驗證 結束
            },
            password: {
                required: true,
                minlength: 5
            },
            confirmpassword: {
                required: true,
                minlength: 5,
                equalTo:"#password"
            },
            mobile: {
                required: true,
                minlength: 5,
            },
        },
        messages: {
            username: {
                required: "請輸入用戶名",
                minlength: "用戶名必需由兩個字母組成",
                remote:"輸入的用戶名已經存在"
            },
            password: {
                required: "請輸入密碼",
                minlength: "密碼長度不能小於 5 個字母"
            },
            confirmpassword: {
                required: "請輸入密碼",
                minlength: "密碼長度不能小於 5 個字母",
                equalTo:"兩次輸入密碼不一致"
            },
            mobile: {
                required: "請輸入手機號",
                minlength: "手機號長度不能小於 5 個字母"
            },
        }
    });
} );
/**
 * 新增用戶信息
 */
function addUser(){
    var flag = $("#addUserInfo").valid();
    if(!flag){
        //沒有通過驗證
        return;
    }
    var data = $("#addUserInfo").serializeObject();
    $.ajax({
        secureuri : false, //是否需要安全協議，一般設置為false
        fileElementId : 'file_path',
        type:"post",
        dataType:'json',
        data:data,
        url:"userManage/adduser.do",
        success:function(json){
            alert(json.message);
            $("#addUserInfo input[name='username']").val("");
            $("#addUserInfo input[name='password']").val("");
            $("#addUserInfo input[name='confirmpassword']").val("");
            $("#addUserInfo input[name='mobile']").val("");
            if(json.success){
                dataTable1.draw();
            }
        }
    });
}

HTML部分：

<div class="box box-primary" style="width:30%;">
    <div class="box-header with-border">
        <h3 class="box-title">新增用戶信息</h3>
    </div>
    <form role="form" id="addUserInfo">
        <div class="box-body">
            <div class="form-group">
                <label for="username">姓名</label>
                <input type="text" class="form-control" id="username"  name="username" placeholder="Enter username" />
            </div>
            <div class="form-group">
                <label for="password">密碼</label>
                <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
            </div>
            <div class="form-group">
                <label for="confirmpassword">再次輸入密碼</label>
                <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" placeholder="Confirm Password" />
            </div>
            <div class="form-group">
                <label for="mobile">電話</label>
                <input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile" />
            </div>
        </div>
        <div class="box-footer">
            <button type="button" οnclick="addUser()" class="btn btn-primary">新增</button>
            <button type="reset" class="btn btn-primary">重置</button>
        </div>
    </form>
</div>

validate提示的樣式

    {# 前端校驗validate   #}
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    {# 必填項提示樣式   #}
    <style type="text/css">
        /************jQuery.Validate插件樣式開始********************/
        label.error {
        {#background: url(images/error.png) no-repeat 0px 0px;#} color: Red;
            padding-left: 20px;
        }

        input.error {
            border: dashed 1px red;
        }

        /************jQuery.Validate插件樣式結束********************/    </style>

 

重置時去掉必填提示樣式

    // 解決關閉模態框后再次打開仍顯示上次的必填提醒
    $(function () {
        $("#updateModal").on("hide.bs.modal", function () {
            $('#update-project-form')[0].reset(); //重置表單
            $(this).find("label.error").remove(); //去掉錯誤提示
            $(".error").removeClass("error"); // 去掉去掉輸入框外輪廓顯示
            $(this).find("option").remove(); // 關閉后刪除下拉option選項，解決多次打開重復顯示問題
        })
    })