jquery.validate不使用submit提交 使用button按钮提交 以及使用ajax验证用户名

Posted 2020-11-08 小丑工作室-小仓库

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" onclick="addUser()" class="btn btn-primary">新增</button>
            <button type="reset" class="btn btn-primary">重置</button>
        </div>
    </form>
</div>