Home > Article > WeChat Applet > An example of how jQuery can implement all forms that can only be submitted after passing verification

An example of how jQuery can implement all forms that can only be submitted after passing verification

小云云Original: 2018-01-16 10:05:041712browse

This article mainly introduces jQuery to implement form verification in detail. All verifications must be passed before submission. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Reg</title>
  <style>
   .state1{
    color:#aaa;
   }
   .state2{
    color:#000;
   }
   .state3{
    color:red;
   }
   .state4{
    color:green;
   }
  </style>
  <script src="jquery.js"></script>
  <script>
   $(function(){
 
    var ok1=false;
    var ok2=false;
    var ok3=false;
    var ok4=false;
    // 验证用户名
    $(&#39;input[name="username"]&#39;).focus(function(){
     $(this).next().text(&#39;用户名应该为3-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);
    }).blur(function(){
     if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=&#39;&#39;){
      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);
      ok1=true;
     }else{
      $(this).next().text(&#39;用户名应该为3-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);
     }
      
    });
 
    //验证密码
    $(&#39;input[name="password"]&#39;).focus(function(){
     $(this).next().text(&#39;密码应该为6-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);
    }).blur(function(){
     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=&#39;&#39;){
      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);
      ok2=true;
     }else{
      $(this).next().text(&#39;密码应该为6-20位之间&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);
     }
      
    });
 
    //验证确认密码
     $(&#39;input[name="repass"]&#39;).focus(function(){
     $(this).next().text(&#39;输入的确认密码要和上面的密码一致,规则也要相同&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);
    }).blur(function(){
     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=&#39;&#39; && $(this).val() == $(&#39;input[name="password"]&#39;).val()){
      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);
      ok3=true;
     }else{
      $(this).next().text(&#39;输入的确认密码要和上面的密码一致,规则也要相同&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);
     }
      
    });
 
    //验证邮箱
    $(&#39;input[name="email"]&#39;).focus(function(){
     $(this).next().text(&#39;请输入正确的EMAIL格式&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state2&#39;);
    }).blur(function(){
     if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
      $(this).next().text(&#39;请输入正确的EMAIL格式&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state3&#39;);
     }else{     
      $(this).next().text(&#39;输入成功&#39;).removeClass(&#39;state1&#39;).addClass(&#39;state4&#39;);
      ok4=true;
     }
      
    });
 
    //提交按钮,所有验证通过方可提交
 
    $(&#39;.submit&#39;).click(function(){
     if(ok1 && ok2 && ok3 && ok4){
      $(&#39;form&#39;).submit();
     }else{
      return false;
     }
    });
     
   });
  </script>
 </head>
<body>
 
<form action=&#39;do.php&#39; method=&#39;post&#39; >
 用 户 名:<input type="text" name="username">
    <span class=&#39;state1&#39;>请输入用户名</span><br/><br/>
 密　　码:<input type="password" name="password">
    <span class=&#39;state1&#39;>请输入密码</span><br/><br/>
 确认密码:<input type="password" name="repass">
    <span class=&#39;state1&#39;>请输入确认密码</span><br/><br/>
 邮　　箱:<input type="text" name="email">
    <span class=&#39;state1&#39;>请输入邮箱</span><br/><br/> 
 <a href="javascript:;" rel="external nofollow" ><img class=&#39;submit&#39; type=&#39;image&#39; src=&#39;./images/reg.gif&#39; /></a>
</form>
</body>
</html>

Related recommendations:

JS password strength verification function example based on regular expression_javascript skills

Vue and Flask implementation Simple login verification jump

JS implementation of simple form verification function example

The above is the detailed content of An example of how jQuery can implement all forms that can only be submitted after passing verification. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sharing examples of WeChat applet realizing tab switching effectNext article：Sharing examples of WeChat applet realizing tab switching effect

See more

An example of how jQuery can implement all forms that can only be submitted after passing verification

Related articles