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

来源：互联网发布：c语言字符串指针赋值编辑：程序博客网时间：2024/06/15 01:31

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>

1 0