Heim > Artikel > Web-Frontend > Detailliertes Beispiel für die Vervollständigung der Formularvalidierungsfunktion von jQuery

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

小云云Original: 2017-12-27 09:44:461528Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes Beispiel für die Implementierung einer einfachen einzeiligen Bearbeitungsfunktion durch jqgridNächster Artikel：Detailliertes Beispiel für die Implementierung einer einfachen einzeiligen Bearbeitungsfunktion durch jqgrid

In Verbindung stehende Artikel

Mehr sehen