在别处 触发JQuery.validate验证

于 2018-06-02 22:29:04 发布
阅读量494 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端样式 文章标签： validate jquery ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_34636440/article/details/80552103
本文介绍了一种在用户点击按钮时进行表单验证的方法，验证成功后阻止表单自动提交，转而执行其他操作。文章详细展示了如何利用jQuery Validate插件实现这一功能，并提供了完整的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

想实现的操作，一个按钮点击的时候，进行校验，并且检验成功后不提交表单，执行其他操作。

原本，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="立&nbsp;&nbsp;即&nbsp;&nbsp;注&nbsp;&nbsp;册" 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("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+(--time)+"s&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                        }, 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="立&nbsp;&nbsp;即&nbsp;&nbsp;注&nbsp;&nbsp;册" 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("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+(--time)+"s&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                        }, 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>



评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值