jQuery表单验证

jQuery常用技术

1.元素动态增删方案

2.正则表达式基础

3.表单验证案例

1.jQuery元素动态增删

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

函数	描述
append	将子元素添加到父元素内的最后
remove	移除元素自身
parent	获取父元素

//此处模拟从后台拿到的数据
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(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

• i  使用此修饰符后，搜索时不区分大小写：`A` 和 `a` 之间没有区别（请参见下面的示例）。
  

• g  使用此修饰符后，搜索时会寻找所有的匹配项 —— 没有它，则仅返回第一个匹配项。
  

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

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项

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

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。
n{X,Y}	匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}	匹配包含至少 X 个 n 的序列的字符串。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp对象方法：

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test	检索字符串中指定的值。返回 true 或 false

2.3 应用

2.3.1 验证11位手机号

let phone = $('input:eq(0)').val();
//定义验证规则
//let phoneExp = /^1[0-9]{10}$/;
let phoneExp = /^1{1}[0-9]{10}$/;
//进行验证
console.log(phoneExp.test(phone));

2.3.2 验证邮箱

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

2.4 案例-表单验证

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

<form action="#">
 <input type="text" name="uname" id="uname"><span></span><br>
  <input type="text" name="email" id="email"><span></span><br>
  <input type="submit" value="check">
</form>

//定义用户名及邮箱的验证规则
let unameVerify = /^[0-9A-z]{6,12}$/i;
let emailExp = /[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(!emailExp.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(!emailExp.test(content)){
                $(this).next().text("邮箱格式不正确");
                $(this).next().css("color","red");
            }
        }
    }
})

本章小结

1.jQuery的动态增删注意拼接形式

2.正则表达式会基础的使用即可，也可单独研究