Exemple de code pour la validation du formulaire jQuery-js tutoriel-php.cn

Exemple de code pour la validation du formulaire jQuery

黄舟

Libérer： 2017-09-30 11:17:42

original

1908 Les gens l'ont consulté

Cet article présente principalement l'exemple de code de jquery pour compléter la vérification du formulaire. Le code est simple et facile à comprendre. Les amis qui en ont besoin peuvent s'y référer

Plus de bêtises, je publierai le code directement. pour tout le monde. Le code spécifique est le suivant Montré :

<!doctype html>
 <head>
 <meta charset=utf-8" />
 <title>表单验证</title>
 <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <!-- 引入jQuery -->
 <script src="jquery/jquery.js" type="text/javascript"></script>
 <script>
 $(document).ready(function() {
 $("form :input.required").each(function() {
 var $required=$("<strong class=high>*</strong>");
 $(this).parent().append($required);
 });
 $("form :input").blur(function() {
 var $parent=$(this).parent();
 $parent.find(".formtips").remove();
 if($(this).is("#username")){
 if(this.value==""||this.value.length<6){
 var errorMsg=&#39;请输入至少六位的用户名&#39;;
 $parent.append(&#39;<span class="formtips onError">&#39;+errorMsg+&#39;</span>&#39;);
 }else{
 var okMsg=&#39;输入正确&#39;;
 $parent.append(&#39;<span class="formtips onSuccess">&#39;+okMsg+&#39;</span>&#39;);
 return false;
 }
 }
 if($(this).is("#email")){
 if(this.value==""||(this.value!==""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
 var errorMsg=&#39;请输入正确的E—mail地址&#39;;
 $parent.append(&#39;<span class="formtips onError">&#39;+errorMsg+&#39;</span>&#39;);
 }else{
 var okMsg=&#39;输入正确&#39;;
 $parent.append(&#39;<span class="formtips onSuccess">&#39;+okMsg+&#39;</span>&#39;);
 }
 }
 });
 $("#send").click(function() {
 $("form .required:input").trigger(&#39;blur&#39;);
 var numError=$("form .onError").length;
 if(numError){
 return false;
 }
 alert("注册成功，密码已发到你的邮箱，请查收。");
 });
 });
 </script>
 </head>
 <body>
 <form method="post" action="">
 <p class="int">
 <label for="username">用户名:</label>
 <input type="text" id="username" class="required" />
 </p>
 <p class="int">
 <label for="email">邮箱:</label>
 <input type="text" id="email" class="required" />
 </p>
 <p class="int">
 <label for="personinfo">个人资料:</label>
 <input type="text" id="personinfo" />
 </p>
 <p class="sub">
 <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
 </p>
 </form>
 </body>
 </html>

Copier après la connexion

Résumé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!