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选项，解决多次打开重复显示问题
        })
    })