day02jQuery表单验证

ゝ一纸荒年。 2023-09-29 21:18 13阅读 0赞

## jQuery常用技术 ##

> 1.元素动态增删方案
> 
> 2.正则表达式基础
> 
> 3.表单验证案例

### 1.jQuery元素动态增删 ###

使用JavaScript的形式进行元素的增删时，优点是逻辑清晰明了，缺点是比较繁琐

<table> 
 <thead> 
  <tr> 
   <th>函数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>append</td> 
   <td>将子元素添加到父元素内的最后</td> 
  </tr> 
  <tr> 
   <td>remove</td> 
   <td>移除元素自身</td> 
  </tr> 
  <tr> 
   <td>parent</td> 
   <td>获取父元素</td> 
  </tr> 
 </tbody> 
</table>

//此处模拟从后台拿到的数据
    var jsonArr = [
        {
        name:"刘备",age:14,sex:"男",address:"三国"},
        {
        name:"关羽",age:13,sex:"男",address:"三国"},
        {
        name:"张飞",age:12,sex:"男",address:"三国"}
    ];
    var i = 1;
    $('button:eq(0)').click(function(){
        
        $.each(jsonArr,function(index,json){
        
            $('table').append("<tr class='add'><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+
                              json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td><td><span class='operation show'>查看</span><span class='operation del'>删除</span></td></tr>")
            // $("<tr><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td></tr>").appendTo($('table'))
            //$('table').prepend("<tr><td>"+(i++)+"</td><td>"+json.name+"</td><td>"+json.age+"</td><td>"+json.sex+"</td><td>"+json.address+"</td></tr>")
        })
    })
    
    $('button:eq(1)').click(function(){
        
        //情况指定元素中的子元素
        //$('table').empty()
        $('tr').remove('[class="add"]')
    })
    
    //给删除标签添加点击事件
    $('table').on('click','.del',function(){
        
        $(this).parent().parent().remove()
    })

### 2.正则表达式-RegExp ###

#### 2.1 概述 ####

正则表达式主要是为了去处理(验证)一些**比较复杂**的数据，例如：手机号运营商区分、身份证号验证等

如果只是简单的验证就不要多此一举再去使用正则表达式，例如：是否为空、是否是11位数字等

要求：只需要各位掌握其基本的使用形式即可，不需要你写复杂的表达式，因为，通常情况下，公司会提供所需要的正则表达式的语句，或者公司没这方面的要求，通常情况下就直接百度一个。

#### 2.2 语法 ####

> var patt=new RegExp(pattern,modifiers);
> 
> 或者更简单的方式:
> 
> var patt=/pattern/modifiers;
> 
>  *  pattern（模式） 描述了表达式的模式
>  *  modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

方括号用于查找某个范围内的字符:

<table> 
 <thead> 
  <tr> 
   <th align="left">表达式</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">[<a href="https://www.w3school.com.cn/jsref/jsref_regexp_charset.asp" rel="nofollow">abc]</a></td> 
   <td align="left">查找方括号之间的任何字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[<a href="https://www.w3school.com.cn/jsref/jsref_regexp_charset_not.asp" rel="nofollow">^abc]</a></td> 
   <td align="left">查找任何不在方括号之间的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[0-9]</td> 
   <td align="left">查找任何从 0 至 9 的数字。</td> 
  </tr> 
  <tr> 
   <td align="left">[a-z]</td> 
   <td align="left">查找任何从小写 a 到小写 z 的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[A-Z]</td> 
   <td align="left">查找任何从大写 A 到大写 Z 的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[A-z]</td> 
   <td align="left">查找任何从大写 A 到小写 z 的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[adgk]</td> 
   <td align="left">查找给定集合内的任何字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[^adgk]</td> 
   <td align="left">查找给定集合外的任何字符。</td> 
  </tr> 
  <tr> 
   <td align="left">(red|blue|green)</td> 
   <td align="left">查找任何指定的选项</td> 
  </tr> 
 </tbody> 
</table>

量词（掌握加粗的三个使用方式即可）：

<table> 
 <thead> 
  <tr> 
   <th align="left">量词</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_regexp_onemore.asp" rel="nofollow">n+</a></td> 
   <td align="left">匹配任何包含至少一个 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_regexp_zeromore.asp" rel="nofollow">n*</a></td> 
   <td align="left">匹配任何包含零个或多个 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_regexp_zeroone.asp" rel="nofollow">n?</a></td> 
   <td align="left">匹配任何包含零个或一个 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left"><strong><a href="https://www.w3school.com.cn/jsref/jsref_regexp_nx.asp" rel="nofollow">n{X}</a></strong></td> 
   <td align="left"><strong>匹配包含 X 个 n 的序列的字符串。</strong></td> 
  </tr> 
  <tr> 
   <td align="left"><strong><a href="https://www.w3school.com.cn/jsref/jsref_regexp_nxy.asp" rel="nofollow">n{X,Y}</a></strong></td> 
   <td align="left"><strong>匹配包含 X 至 Y 个 n 的序列的字符串。</strong></td> 
  </tr> 
  <tr> 
   <td align="left"><strong><a href="https://www.w3school.com.cn/jsref/jsref_regexp_nxcomma.asp" rel="nofollow">n{X,}</a></strong></td> 
   <td align="left"><strong>匹配包含至少 X 个 n 的序列的字符串。</strong></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_regexp_ndollar.asp" rel="nofollow">n$</a></td> 
   <td align="left">匹配任何结尾为 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_regexp_ncaret.asp" rel="nofollow">^n</a></td> 
   <td align="left">匹配任何开头为 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_regexp_nfollow.asp" rel="nofollow">?=n</a></td> 
   <td align="left">匹配任何其后紧接指定字符串 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_regexp_nfollow_not.asp" rel="nofollow">?!n</a></td> 
   <td align="left">匹配任何其后没有紧接指定字符串 n 的字符串。</td> 
  </tr> 
 </tbody> 
</table>

RegExp对象方法：

<table> 
 <thead> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
   <th align="left">FF</th> 
   <th align="left">IE</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_regexp_compile.asp" rel="nofollow">compile</a></td> 
   <td align="left">编译正则表达式。</td> 
   <td align="left">1</td> 
   <td align="left">4</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_exec_regexp.asp" rel="nofollow">exec</a></td> 
   <td align="left">检索字符串中指定的值。返回找到的值，并确定其位置。</td> 
   <td align="left">1</td> 
   <td align="left">4</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.w3school.com.cn/jsref/jsref_test_regexp.asp" rel="nofollow">test</a></td> 
   <td align="left">检索字符串中指定的值。返回 true 或 false</td> 
   <td align="left"></td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

#### 2.3 应用 ####

##### 2.3.1 验证11位手机号 #####

##### 2.3.2 验证邮箱 #####

let email = $('input:eq(0)').val();
    let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
    console.log(emailVerify.test(email));

#### 2.4 案例-表单验证 ####

用户提交表单时对表单中的数据进行验证，同时，当输入框失去焦点时进行快速验证提示，提供用户体验性

//定义用户名及邮箱的验证规则
    let unameVerify = /^[0-9A-z]{6,12}$/i;
    let emailVerify = /[0-9A-z]{1,}@[0-9A-z]{2,}\.(cn|com)$/;
    //定义表单提交事件
    $('form').submit(function(){
        
        //验证表单内容是否完全符合规则
        let flag = false;
        $('input:not([type="submit"])').each(function(){
        
            let content = $(this).val();
            //用户名验证
            if($(this).attr('name') == "uname"){
        
                if(!unameVerify.test(content)){
        
                    //不符合规则
                    flag = false;
                    return;
                }
                flag = true;
            }
            if($(this).attr('name') == "email"){
        
                if(!emailVerify.test(content)){
        
                    flag = false;
                    return;
                }
                flag = true;
            }
        })
        return flag;
    })
    //通过焦点事件对单个输入框进行验证
    $('input:not([type="submit"])').on({
        
        focus:function(){
        
            if($(this).attr("name") == "uname"){
        
                $(this).next().text("数字+字母6~12位");
                $(this).next().css("color","#b0b0b0");
            }
            if($(this).attr("name") == "email"){
        
                $(this).next().text("邮箱格式：xxx@xx.cn/com");
                $(this).next().css("color","#b0b0b0");
            }
        },
        //失去焦点事件
        blur:function(){
        
            let content = $(this).val()
            if($(this).attr("name") == "uname"){
        
                if(!unameVerify.test(content)){
        
                    $(this).next().text("用户名格式不正确");
                    $(this).next().css("color","red");
                }
            }
            if($(this).attr("name") == "email"){
        
                if(!emailVerify.test(content)){
        
                    $(this).next().text("邮箱格式不正确");
                    $(this).next().css("color","red");
                }
            }
        }
    })

## 本章小结 ##

> 1.jQuery的动态增删注意拼接形式
> 
> 2.正则表达式会基础的使用即可，也可单独研究

## 作业 ##

1、书写拥有三个选择框的穿梭框,使数据允许在三个选择框中移动