day02jQuery表单验证

Posted 2023-03-08 云和数据张老师

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(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

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

表达式	描述
[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 的字符串。
nX	匹配包含 X 个 n 的序列的字符串。
nX,Y	匹配包含 X 至 Y 个 n 的序列的字符串。
nX,	匹配包含至少 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 phoneVerify = /^1[0-9]10$/;
let phoneVerify = /^11[0-9]10$/;
//进行验证
console.log(phoneVerify.test(phone));

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 案例-表单验证

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

<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 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("邮箱格式：[e-mail]/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、书写拥有三个选择框的穿梭框,使数据允许在三个选择框中移动