表单验证

node2:/var/www/html/aa#cat a27.html 
<form method="post" action="">
 <div class="int">
 <label for="username">用户名:</label>
 <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>


node2:/var/www/html/aa#cat a27.js
$("form :input.required").each(function(){
   var $required=$("<strong class='high'>*</strong>");
   $(this).parent().append($required);
});

当用户在"用户名"文本框中填写完信息后,将光标的焦点从"用户名"移出时,需要即时

判断用户名是否符合验证规则。

当光标的焦点从"邮箱"文本框移出时,需要即时判断"邮箱"填写是否正确,因此需要给表单元素添加失去焦点事件,

即blur.


验证表单元素步骤如下:


1) 判断当前失去焦点的元素是"用户名"还是"邮箱",然后分别处理

2） 如果是"用户名",判断元素的值的长度是否小于6,如果小于6,则用红色提醒用户输入不正确,

反之,则用绿色提醒用户输入正确。

3）如果是"邮箱",判断元素的值是否符合邮箱的格式,如果不符合,则用红色提醒用户输入不正确,


反之,则用绿色提醒用户输入正确。

4）将提醒的信息追加到当前元素的父元素的最后

node2:/var/www/html/aa#cat a27.js
$("form :input.required").each(function(){
   var $required=$("<strong class='high'>*</strong>");
   $(this).parent().append($required);
});
$('form :input').blur(function(){ //为表单元素添加失去焦点事件
    var $parent=$(this).parent();
    //验证用户名
    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>');
                 }
         }
});

由于每次在元素失去焦点后,都会创建一个新的提醒元素,然后将它追加到文档中,最后就出现了多次的提醒信息。

因此,需要在创建提醒元素之前,将当前元素以前的提醒元素删除。可以使用remove()方法来实现,代码如下: