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>
jquery.validate不使用submit提交 使用button按钮提交 以及使用ajax验证用户名
原文地址:https://www.cnblogs.com/xxaxx/p/9087347.html