jQuery复习：第五章

一、表单应用

1.表单验证：

首先创建一个表单：

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

验证表单元素步骤如下：

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

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

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

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

jQuery代码如下：

$("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">"+error Msg+'</span>');
        }else{
              var okMsg='输入正确.';
              $parent.append('<span class="formtips onSuccess">'+ok Msg+'</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">'+error Msg+'</span>');
         }else{
               var okMsg='请输入正确.';
               $parent.append('<span>'+ok Msg+'</span>');
           }
     }
})  

二、contains选择器：

　　contains选择器可以根据<td>元素的内容来选择当前<td>元素。例如：　

<table>
    <tr>
        <td>王五</td>
        <td>李四</td>
        <td>张三</td>
    </tr>
</table>

如果要选择王五那一行，为它添加一个select类名，代码如下：

$("tr:contains('王五')").addClass("selected");