jquery.validate不使用submit提交,而是使用button按钮提交
作者:互联网
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选项,解决多次打开重复显示问题 }) })
标签:jquery,function,minlength,button,required,addUserInfo,提交,error,true 来源: https://www.cnblogs.com/gcgc/p/13947683.html