用jquery.validate() 如何控制提交？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery.validate() 如何控制提交？相关的知识，希望对你有一定的参考价值。
用jQuery做表单验证，验证消息可以成功显示，但是就算有错误的验证提示，照样可以提交表单信息。
我想做到，如果有验证没通过就不能提交的效果。请问该如何处理？
原代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head>
<script src="./jquery-latest.js"></script>
<script type="text/javascript" src="./jquery.validate.js"></script>
<style type="text/css">
* font-family: Verdana; font-size: 96%;
label width: 10em; float: left;
label.error float: none; color: red; padding-left: .5em; vertical-align: top;
p clear: both;
.submit margin-left: 12em;
em font-weight: bold; padding-right: 1em; vertical-align: top;
</style>
<!-- just style-->
<script>
$(function()
$.validator.setDefaults(
submitHandler: function(form)
form.submit();
);
///手机号码规范验证
jQuery.validator.addMethod("isMobile", function(value, element)
var length = value.length;
var mobile = /^(((13[0-9]1)|(15[0-9]1))+\d8)$/;
return this.optional(element) || (length == 11 && mobile.test(value));
, "请正确填写您的手机号码");
///主函数
$("#regist").validate(
rules:
name:" required",
email:
required:true,
email:true
,
phone:
required:true,
isMobile:true
,
password:
required:true,
minlength:5
,
confirm:
required:true,
equalTo:"#password"
,
messages:
name:"空是不行的",
email:
required:"不能为空",
email:"请输入正确的E-mail格式"
,
phone:
required:"不能为空",
isMobile:"请输入正确 "
,
password:
required:"不能为空",
minlength:jQuery.format("密码不能小于0位数")
,
confirm:
required:"不能为空",
equalTo:"与密码要一致"
);
);
</script>
</head>
<body>
<form action="cat.do?method=regist" method="post" id="regist">
<fieldset>
<legend>注册</legend>
<p>
<label for="name" >name : </label>
<em>*</em>
<input type="text" name="name" id="name" size="25">
</p>
<p>
<label for="password" > password :</label><em>*</em>
<input type="text" name="password" id="password" size="25">
</p>
<p>
<label for="confirm" > confirm :</label><em>*</em>
<input type="text" name="confirm" id="confirm" size="25">
</p>
<p>
<label for="email">email : </label><em> </em>
<input type="text" name="email" id="email" size="25" class="required email">
</p>
<p>
<label for="phone">cell phone: </label><em> </em>
<input type="text" name="phone" id="phone" size="25">
</p>
<p></p>
<p>
<input type="submit" value="sub" id="submit">
<input type="reset" value="reset" >
</p>
</fieldset>
</form>
</body>
</html>
$("#frmClient").validate(
rules:
txtClientName:
required: true,
minlength: 2
,
success: function(label)
onSave();
);
参考技术A 检查jquery.validate.js文件，看它是怎么处理验证的，是否返回true or false.如没有，自己写一个判定。加个IF语句。
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>
以上是关于用jquery.validate() 如何控制提交？的主要内容，如果未能解决你的问题，请参考以下文章
jquery.validate不用submit提交，用js提交的，怎么触发验证啊？
jQuery Validate SubmitHandler 与 Ajax 提交没有被击中
如何将 jQuery Validate 与此 ajax 结合使用？