jquery implements simple form validation

jquery implements simple form validation_jquery

WBOY

Release： 2016-05-16 15:31:47

Original

914 people have browsed it

How to implement simple form validation in jquery, let us first share with you the implementation ideas.

General idea:
First add required tags for each required, using the each() method to implement it.
In each() method, first create an element with , and then add the created element to the back of the parent element through the append() method .
The this here is very essential. Each time this corresponds to the corresponding input element, and then the corresponding parent element is obtained.
Then add a lost focus event for the input element. Then verify the user name and email.
Here a is used to judge is(). If is a user name, do the corresponding processing. If it is an email, do the corresponding verification.
In the jQuery framework, you can also appropriately intersperse original javascript code. For example, the verification user name contains this.value, and this.value.length. Judge the content.
Then the verification of the email was carried out, using the regular expression.
Then add keyup event and focus event to the input element. Even during keyup, you need to verify it by calling the blur event. . Use triggerHandler() trigger to trigger the corresponding event.
When submitting the form at the end, perform unified verification and handle the overall and detailed processing.
If it is required, add red star mark.

jQuery part:

<script type="text/javascript">
//<![CDATA[
$(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 = '请输入至少6位的用户名.';
      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
     }else{
      var okMsg = '输入正确.';
      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
     }
    }
    //验证邮件
    if( $(this).is('#email') ){
    if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
      var errorMsg = '请输入正确的E-Mail地址.';
      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
    }else{
      var okMsg = '输入正确.';
      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
    }
    }
  }).keyup(function(){
   $(this).triggerHandler("blur");
  }).focus(function(){
    $(this).triggerHandler("blur");
  });//end blur

  
  //提交，最终验证。
   $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
     return false;
    } 
    alert("注册成功,密码已发到你的邮箱,请查收.");
   });

  //重置
   $('#res').click(function(){
    $(".formtips").remove(); 
   });
})
//]]>
</script>

Copy after login

html part:

<body>

<form method="post" action="">
 <div class="int">
  <label for="username">用户名:</label>
  <!-- 为每个需要的元素添加required -->
  <input type="text" id="username" class="required" />
 </div>
 <div class="int">
  <label for="email">邮箱:</label>
  <input type="text" id="email" class="required" />
 </div>
 <div class="int">
  <label for="personinfo">个人资料:</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="sub">
  <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
 </div>
</form>

</body>

Copy after login

The above is the key code for jquery to implement simple form validation. I hope it will be helpful to everyone's learning.