jQuery对表格表单的操作

发表于 | 分类于 |
字数统计: 816 | 阅读时长 ≈ 3

复选框全选操作

算法1：

  1. 对复选框组绑定单击事件
  2. 定义一个flag变量，默认为true
  3. 循环复选框，当有没被选中的项时，把变量flag的值设为false
  4. 根据变量flag的值来设置id为“CheckedAll”的复选框是否选中
    ①如果flag为true,说明复选框都被选中
    ②如果flag为false,说明复选框组至少有一个未被选中 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    $('[name=items]:checkbox').click(function(){
                    var flag = true
                    $('[name=items]:checkbox').each(function(){
                        if(!this.checked){
                            flag = false
                        }
                    })
                    $("#CheckedAll").attr('checked',flag)
                })
    算法2：

1.对复选框组绑定单击事件
2.判断复选框的总数是否与选中的复选框数量相等
3.如果相等，则说明全选中了，id为’CheckedAll‘的复选框位于选中状态，否则不选中

1
2
3
4
5
6
 $('[name=items]:checkbox').click(function(){
                var $tmp = $('[name=items]:checkbox')
                //用filter()方法筛选出选中的复选框，并直接给CheckedAll赋值
                $('#CheckedAll').prop('checked',
                $tmp.length==$tmp.filter(':checked').length)
            })

注册页面表单校验

算法：

1.判断当前失去焦点的元素是用户名还是邮箱，然后分别处理
2.用户名正确性判断
3.邮箱正确性判断
4.将提示信息追加到当前元素的父元素之后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form</title>
    <script src="jquery-3.5.1.js" type="text/javascript"></script>
    <script>
        $(function() {
            //给必填选项后面加星号
            $("input.required").each(function(){
                var $required = $("<strong class='high'> * </strong>");
                $(this).append($required)
            })
            //为表单元素添加失去焦点事件
            $("input").blur(function(){
                var $parent = $(this).parent()
                if($(this).is('#username')){
                    //删除以前的提醒元素
                    $parent.find(".formtips").remove()
                    if(this.value==" "||this.value.length < 6){                       
                        $parent.append('<span class="formtips error">请输入正确的用户名</span>')
                    }else{
                        $parent.append('<span class="formtips">输入正确</span>')
                    }
                }
                if($(this).is('#email')){
                    //.+@.+\.[A-Za-z] {2,4}$
                    //删除以前的提醒元素
                    $parent.find(".formtips").remove()
                    if(this.value==""||(this.value!="" && !/(\w)+@[A-z0-9]+\.[A-z]{2,5}$/.test(this.value))){
                        $parent.append('<span class="formtips error">请输入正确的邮箱地址</span>')
                        //输入不正确的输入框变红
                        $(this).css({"background-color":"#C0C0C0"})
                    }else{
                        $parent.append('<span class="formtips">输入正确</span>')
                    }
                }
                //triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡
            }).keyup(function(){    //每次松开时触发，实现即时提醒
                $(this).triggerHandler("blur")
            })
           
            //提交校验
            $(".sub").click(function() {
                $("input").trigger("blur")
                var $numError = $('input.error').length
                if($numError){
                    return false
                }
                alert("注册成功")
            })
        })
    </script>
</head>
<body>
    <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>
        <br/>
        <div class="sub">
            <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
        </div>
    </form>
</body>
</html>