jquery.validate不使用submit提交 使用button按钮提交 以及使用ajax验证用户名
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>