Home >Web Front-end >JS Tutorial >Detailed example of jQuery completing form validation function

Detailed example of jQuery completing form validation function

小云云Original: 2017-12-27 09:44:461578browse

This article mainly introduces the example code of jquery to complete form verification. The code is simple and easy to understand. Friends who need it can refer to it. I hope it can help everyone use jQuery to complete the form verification function.

Without further ado, I will post the code directly for you. The specific code is as follows:

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

Related recommendations:

AngularJS implements form verification mobile phone number function

Detailed explanation of Angular implementing form verification function

WeChat applet form Complete example of verification function

The above is the detailed content of Detailed example of jQuery completing form validation function. 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：Detailed example of jqgrid implementing simple single-line editing functionNext article：Detailed example of jqgrid implementing simple single-line editing function

See more

Detailed example of jQuery completing form validation function

Related articles