Home  >  Article  >  Backend Development  >  Jquery implements form verification, and all verifications must be passed before submission

Jquery implements form verification, and all verifications must be passed before submission

WBOY
WBOYOriginal
2016-07-25 08:50:031088browse
Little test
  1. Reg</title> ;<li> <style></li> <li> .state1{</li> <li> color:#aaa;</li> <li> }</li> <li> .state2{</li> <li> color:#000;</li> <li> }</li> <li> .state3{</li> <li> color:red;</li> <li> }</li> <li> .state4{</li> <li> color:green; </li> <li> }</li> <li> </style></li> <li> <script src="jquery.js"></script></li> <li> <script></li> <li> $(function(){</li> <li> <li> var ok1=false;</li> <li> var ok2=false ;</li> <li> var ok3=false;</li> <li> var ok4=false;</li> <li> // Verify username</li> <li> $('input[name="username"]').focus(function(){</li> <li> $(this).next(). text('The username should be between 3-20 characters').removeClass('state1').addClass('state2');</li> <li> }).blur(function(){</li> <li> if($(this).val( ).length >= 3 && $(this).val().length <=12 && $(this).val()!=''){<li> $(this).next().text(' Input successful').removeClass('state1').addClass('state4');<li> ok1=true;<li> }else{<li> $(this).next().text('The user name should be between 3-20 characters between').removeClass('state1').addClass('state3');<li> }<li> <li> });<li><li> //Verify password<li> $('input[name="password"]').focus(function( ){<li> $(this).next().text('The password should be between 6-20 characters').removeClass('state1').addClass('state2');<li> }).blur(function() {<li> if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){<li> $ (this).next().text('Input successful').removeClass('state1').addClass('state4');<li> ok2=true;<li> }else{<li> $(this).next().text ('The password should be between 6-20 characters').removeClass('state1').addClass('state3');<li> }<li> <li> });<li><li> //Verify and confirm the password<li> $('input[name= "repass"]').focus(function(){<li> $(this).next().text('The confirmation password entered must be consistent with the password above, and the rules must be the same').removeClass('state1') .addClass('state2');<li> }).blur(function(){<li> if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){</li> <li> $(this).next ().text('Input successful').removeClass('state1').addClass('state4');</li> <li> ok3=true;</li> <li> }else{</li> <li> $(this).next().text('Confirmation of input The password must be consistent with the password above, and the rules must be the same').removeClass('state1').addClass('state3');</li> <li> }</li> <li> </li> <li> });</li> <li> <li> //Verify email</li> <li> $('input[name= "email"]').focus(function(){</li> <li> $(this).next().text('Please enter the correct EMAIL format').removeClass('state1').addClass('state2');</li> <li> }).blur(function(){</li> <li> if($(this).val().search(/w+([-+.]w+)*@w+([-.]w+)*.w+([-. ]w+)*/)==-1){</li> <li> $(this).next().text('Please enter the correct EMAIL format').removeClass('state1').addClass('state3');</li> <li> } else{ </li> <li> $(this).next().text('Input successful').removeClass('state1').addClass('state4');</li> <li> ok4=true;</li> <li> }</li> <li> </li> <li> });</li> <li> <li> // Submit button, all verifications must be passed to submit</li> <li> <li> $('.submit').click(function(){</li> <li> if(ok1 && ok2 && ok3 && ok4){</li> <li> $('form').submit();</li> <li> }else{</li> <li> return false;</li> <li> }</li> <li> });</li> <li> </li> <li> });</li> <li> </script></li> <li> </head></li> <li><body></li> <li> </li> <li><form action='do.php' method='post' ></li> <li> Username:<input type="text" name="username"></li> <li> <span class='state1'>Please enter username</span><br/><br/></li> <li> Password:<input type="password" name="password"></li> <li> <span class='state1'>Please enter password</span><br/><br/></li> <li> Confirm password:<input type="password" name="repass"></li> <li> <span class='state1'>Please enter the confirmation password</span><br/><br/></li> <li> Email:<input type="text" name="email"></li> <li> <span class='state1'>Please enter your email</span><br/><br/> </li> <li> <a href="javascript:;"> ;<img class='submit' type='image' src='./images/reg.gif' /></a></li> <li></form></li> <li></body></li> <li> </ol></div> <em onclick="copycode($('code_qFV'));">Copy Code </em> </div> </td></tr></table> <div id="comment_50669" class="cm"> </div> <div id="post_rate_div_50669"></div> <br><br></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement:</span><div>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</div></div></div><div class="nphpSytBox"><span>Previous article:<a class="dBlack" title="For 2D array sorting - PHP" href="http://m.php.cn/faq/314620.html">For 2D array sorting - PHP</a></span><span>Next article:<a class="dBlack" title="For 2D array sorting - PHP" href="http://m.php.cn/faq/314625.html">For 2D array sorting - PHP</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1.html" title="How to use cURL to implement Get and Post requests in PHP" class="aBlack">How to use cURL to implement Get and Post requests in PHP</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1.html" title="How to use cURL to implement Get and Post requests in PHP" class="aBlack">How to use cURL to implement Get and Post requests in PHP</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1.html" title="How to use cURL to implement Get and Post requests in PHP" class="aBlack">How to use cURL to implement Get and Post requests in PHP</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1.html" title="How to use cURL to implement Get and Post requests in PHP" class="aBlack">How to use cURL to implement Get and Post requests in PHP</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2.html" title="All expression symbols in regular expressions (summary)" class="aBlack">All expression symbols in regular expressions (summary)</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training,Help PHP learners grow quickly!</p></div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>