Detailliertes Beispiel für die Vervollständigung der Formularvalidierungsfunktion von jQuery-js-Tutorial-php.cn

Detailliertes Beispiel für die Vervollständigung der Formularvalidierungsfunktion von jQuery

小云云

Freigeben： 2017-12-27 09:44:46

Original

1578 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich der Beispielcode von jQuery zum Vervollständigen der Formularüberprüfung vorgestellt. Der Code ist einfach und leicht zu verstehen. Freunde, die ihn benötigen, können darauf zurückgreifen. Ich hoffe, er kann jedem helfen, die Formularüberprüfungsfunktion zu verwenden.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen. Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

AngularJS implementiert die Funktion zur Formularüberprüfung für Mobiltelefonnummern

Detaillierte Erläuterung der Implementierung der Formularüberprüfungsfunktion durch Angular

WeChat Mini Vollständiges Beispiel für die Formularvalidierungsfunktion des Programms

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für die Vervollständigung der Formularvalidierungsfunktion von jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!