本文介绍了一种在用户点击按钮时进行表单验证的方法，验证成功后阻止表单自动提交，转而执行其他操作。文章详细展示了如何利用jQuery Validate插件实现这一功能，并提供了完整的代码示例。
想实现的操作，一个按钮点击的时候，进行校验，并且检验成功后不提交表单，执行其他操作。
原本，validate进行验证通过的时候，会自动提交表单。
所以，第一步，需要修改表单，在表单中不要有type为submit的input标签。
第二步，将$('#form').validate()赋予某一个变量validator
第三步，添加按钮的onclick事件，在里面首先执行validator.form()就可以执行validate的校验。然后，可以使用validator.valid()进行判断校验的结果，之后在执行自己的操作
如果执行不调用validator.form() 会造成，一开始的validator.valid()的结果为true
还有可以使用var _one = $("#registform").validate().element($("#user_email")) 来对其中一个表单元素进行校验。
实例代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'regist.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/validate.css">
<!-- jquery文件 版本较低
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<!-- bootstrap -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<!-- 验证的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_cn.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/tooltip.js"></script>
<!-- 国际化的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
<style>
body{
background: url(${pageContext.request.contextPath }/img/regitBackground.jpg);
}
.errorTip{
color: red;
}
.topDiv{
display: block;
height: 60px;
position: relative;
margin-bottom: 30px;
}
.topContent{
height: 50px;
line-height: 50px;
margin-top: 10px;
box-shadow: 0px 7px 7px -7px #5E5E5E;
}
.topContent h4{
color:#45494C;
font-weight: bold;
margin-top: 20px;
}
#registform{
padding: 0 50px;
height: auto;
}
#myError{
height: 25px;
line-height: 25px;
background: #F7ECB5;
font-size: 12px;
color: #737373;
margin-right: 30px;
border: 1px solid #EEA236;
visibility: hidden;
}
#myError span{
margin-left: 10px;
}
#myError img{
margin-left: 5px;
width: 17px;
height: 17px;
margin-bottom: 4px;
}
</style>
<script>
var validata;
$(function(){
validata=$('#registform').validate({
rules:{
user_email:{
required:true,
email:true,
remote:{ //自带远程验证存在的方法
url:"${pageContext.request.contextPath}/user_verifyRepeat.action",
type:"post",
dataType:"json",
data:{
user_email:function(){return $("#user_email").val();}
},
dataFilter: function(data) {
if(data == 1){
return true;
}else{
return false;
}
}
}
},
user_password:{
required:true,
minlength:5
},
surePwd:{
required:true,
minlength:5,
equalTo:"#user_password"
},
verify_code:{
required:true
}
},
messages:{
//字段的name属性：提示信息
//字段的name属性：{"校验器：提示信息，校验器：提示信息"}
user_email:{
required:"邮箱不能为空",
email:"请输入正确的邮箱格式",
remote:"该邮箱地址已经被注册了"
},
user_password:{
required:"密码不能为空",
minlength:"密码的最少长度为5位"
},
surePwd:{
required:"确认密码不能为空",
minlength:"密码的最少长度为5位",
equalTo:"两次密码不一致"
},
verify_code:{
required:"验证码不能为空"
}
}
})
})
</script>
</head>
<body>
<!--
作者：wpx
时间：2018-06-02
描述：注册页面
-->
<div class="col-sm-12 topDiv form-inline">
<div class="col-sm-2"></div>
<div class="col-sm-8 row topContent" >
<div class="col-sm-5">
<h4>注册账号</h4>
</div>
<div class="pull-right">
<span>我已注册，现在就</span>
<input class="btn btn-default btn-sm" value="登录" id="loginBtn" type="button">
</div>
</div>
<div class="col-sm-2"></div>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form class="form-horizontal" role="form" id="registform" method="post" >
<div class="form-group">
<label for="user_email" >邮箱</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" id="user_email" name="user_email" placeholder="请输入邮箱地址">
</div>
</div>
<div class="form-group">
<label for="password" >密码</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" id="user_password" name="user_password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="surePwd" >确认密码</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" id="surePwd" name="surePwd" placeholder="请再次输入密码">
</div>
</div>
<div class="row">
<div class="col-xs-7">
<div class="form-group has-feedback">
<label for="verify_code">校验码</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
<input id="verify_code" name="verify_code" class="form-control" placeholder="请输入校验码" maxlength="6" type="text">
</div>
</div>
</div>
<div class="col-xs-5" style="padding-top: 26px; " >
<button type="button" id="getCode" class="btn btn-primary pull-right" autocomplete="off">获取验证码</button>
</div>
</div>
<div id="myError" class="form-group" >
<div class="form-inline">
<img src="${pageContext.request.contextPath }/img/alert.png" />
<span id="errorContent"></span>
</div>
</div>
<div class="form-group">
<input class="form-control btn btn-primary" id="submitBtn" value="立 即 注 册" type="button">
</div>
<div class="form-group">
<input value="重置" id="reset" class="form-control btn btn-danger" type="reset">
</div>
</form>
</div>
<div class="col-sm-4"></div>
</body>
<script type="text/javascript">
$("#getCode").click(function(){
var _one = $("#registform").validate().element($("#user_email"));
if(_one){
var url="${pageContext.request.contextPath}/user_sendEmail.action";
var param = {"user_email":$("input[name='user_email']").val()}
$.post(url,param,function(data){
if(data.result == 1){
var time=60;
$("#getCode").attr("disabled","disabled");
var code = setInterval(function() {
$("#getCode").html(" "+(--time)+"s ");
}, 1000)
setTimeout(function() {
clearInterval(code);
$("#getCode").removeAttr("disabled");
$("#getCode").html("获取验证码");
}, 6000);
}else{
alert("发送失败");
}
},"json");
}
})
$('#loginBtn').click(function(){
window.location.href="${pageContext.request.contextPath}/login.jsp";
})
$('#submitBtn').click(function(){
validata.form();
if(validata.valid()){
var url = "${pageContext.request.contextPath}/user_regist.action";
var param = {"user_email":$('#user_email').val(),"user_password":$('#user_password').val(),"verify_code":$('#verify_code').val()}
$.post(url,param,function(data){
if(data.result == 1){
window.location.href="${pageContext.request.contextPath}/login.jsp";
}else{
$('#errorContent').html(data.tipMsg);
$('#myError').css('visibility','visible');
}
},"json")
}
})
$('input').keydown(function(){
if($('#myError').css('visibility')=='visible'){
$('#myError').css('visibility','hidden');
}
})
</script>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'regist.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/validate.css">
<!-- jquery文件 版本较低
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.3.min.js"></script>
-->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>
<!-- bootstrap -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<!-- 验证的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.validate.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_cn.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/tooltip.js"></script>
<!-- 国际化的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/js/messages_zh.js"></script>
<style>
body{
background: url(${pageContext.request.contextPath }/img/regitBackground.jpg);
}
.errorTip{
color: red;
}
.topDiv{
display: block;
height: 60px;
position: relative;
margin-bottom: 30px;
}
.topContent{
height: 50px;
line-height: 50px;
margin-top: 10px;
box-shadow: 0px 7px 7px -7px #5E5E5E;
}
.topContent h4{
color:#45494C;
font-weight: bold;
margin-top: 20px;
}
#registform{
padding: 0 50px;
height: auto;
}
#myError{
height: 25px;
line-height: 25px;
background: #F7ECB5;
font-size: 12px;
color: #737373;
margin-right: 30px;
border: 1px solid #EEA236;
visibility: hidden;
}
#myError span{
margin-left: 10px;
}
#myError img{
margin-left: 5px;
width: 17px;
height: 17px;
margin-bottom: 4px;
}
</style>
<script>
var validata;
$(function(){
validata=$('#registform').validate({
rules:{
user_email:{
required:true,
email:true,
remote:{ //自带远程验证存在的方法
url:"${pageContext.request.contextPath}/user_verifyRepeat.action",
type:"post",
dataType:"json",
data:{
user_email:function(){return $("#user_email").val();}
},
dataFilter: function(data) {
if(data == 1){
return true;
}else{
return false;
}
}
}
},
user_password:{
required:true,
minlength:5
},
surePwd:{
required:true,
minlength:5,
equalTo:"#user_password"
},
verify_code:{
required:true
}
},
messages:{
//字段的name属性：提示信息
//字段的name属性：{"校验器：提示信息，校验器：提示信息"}
user_email:{
required:"邮箱不能为空",
email:"请输入正确的邮箱格式",
remote:"该邮箱地址已经被注册了"
},
user_password:{
required:"密码不能为空",
minlength:"密码的最少长度为5位"
},
surePwd:{
required:"确认密码不能为空",
minlength:"密码的最少长度为5位",
equalTo:"两次密码不一致"
},
verify_code:{
required:"验证码不能为空"
}
}
})
})
</script>
</head>
<body>
<!--
作者：吴沛旋
时间：2018-06-02
描述：注册页面
-->
<div class="col-sm-12 topDiv form-inline">
<div class="col-sm-2"></div>
<div class="col-sm-8 row topContent" >
<div class="col-sm-5">
<h4>注册账号</h4>
</div>
<div class="pull-right">
<span>我已注册，现在就</span>
<input class="btn btn-default btn-sm" value="登录" id="loginBtn" type="button">
</div>
</div>
<div class="col-sm-2"></div>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<form class="form-horizontal" role="form" id="registform" method="post" >
<div class="form-group">
<label for="user_email" >邮箱</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" id="user_email" name="user_email" placeholder="请输入邮箱地址">
</div>
</div>
<div class="form-group">
<label for="password" >密码</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" id="user_password" name="user_password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="surePwd" >确认密码</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" class="form-control" id="surePwd" name="surePwd" placeholder="请再次输入密码">
</div>
</div>
<div class="row">
<div class="col-xs-7">
<div class="form-group has-feedback">
<label for="verify_code">校验码</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-qrcode"></span></span>
<input id="verify_code" name="verify_code" class="form-control" placeholder="请输入校验码" maxlength="6" type="text">
</div>
</div>
</div>
<div class="col-xs-5" style="padding-top: 26px; " >
<button type="button" id="getCode" class="btn btn-primary pull-right" autocomplete="off">获取验证码</button>
</div>
</div>
<div id="myError" class="form-group" >
<div class="form-inline">
<img src="${pageContext.request.contextPath }/img/alert.png" />
<span id="errorContent"></span>
</div>
</div>
<div class="form-group">
<input class="form-control btn btn-primary" id="submitBtn" value="立 即 注 册" type="button">
</div>
<div class="form-group">
<input value="重置" id="reset" class="form-control btn btn-danger" type="reset">
</div>
</form>
</div>
<div class="col-sm-4"></div>
</body>
<script type="text/javascript">
$("#getCode").click(function(){
var _one = $("#registform").validate().element($("#user_email"));
if(_one){
var url="${pageContext.request.contextPath}/user_sendEmail.action";
var param = {"user_email":$("input[name='user_email']").val()}
$.post(url,param,function(data){
if(data.result == 1){
var time=60;
$("#getCode").attr("disabled","disabled");
var code = setInterval(function() {
$("#getCode").html(" "+(--time)+"s ");
}, 1000)
setTimeout(function() {
clearInterval(code);
$("#getCode").removeAttr("disabled");
$("#getCode").html("获取验证码");
}, 6000);
}else{
alert("发送失败");
}
},"json");
}
})
$('#loginBtn').click(function(){
window.location.href="${pageContext.request.contextPath}/login.jsp";
})
$('#submitBtn').click(function(){
validata.form();
if(validata.valid()){
var url = "${pageContext.request.contextPath}/user_regist.action";
var param = {"user_email":$('#user_email').val(),"user_password":$('#user_password').val(),"verify_code":$('#verify_code').val()}
$.post(url,param,function(data){
if(data.result == 1){
window.location.href="${pageContext.request.contextPath}/login.jsp";
}else{
$('#errorContent').html(data.tipMsg);
$('#myError').css('visibility','visible');
}
},"json")
}
})
$('input').keydown(function(){
if($('#myError').css('visibility')=='visible'){
$('#myError').css('visibility','hidden');
}
})
</script>
</html>
扫一扫
1474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
