day22——表单验证（面试重点）

最新推荐文章于 2023-12-05 19:39:09 发布

ice_bear-

最新推荐文章于 2023-12-05 19:39:09 发布

阅读量335

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/100753521

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

实现效果

在这里插入图片描述

实现功能

分别验证每个框的功能，验证成功后可以提交表单

零碎

1. `cursor`的禁止图标为：`cursor:not allowed`

2. 提交方式`get`

不安全，数据量大，可见提交

(有name名的input)；
在这里插入图片描述
post

安全不可见，数据量小

但是数据在network中同样可以看到；
可以提交到不同机器上；
在这里插入图片描述
在表单上增加onsubmit:return false事件，提交无效

3. 自定义对象取值

4. this指针的替换

（call 用当前事件this替换当前自定义对象里的this）

用this替换this.id
不需要传形参，直接输出中传this即可

5. `this.value.trim()`文本框去空方法（去除空格）

6. 正则以`/^`开始，以`$/`结尾

7. 字体图标引入方法

在这里插入图片描述
在css中引入需要的东西之后在页面中直接调用

<i class="iconfont">&#xf0102;</i>

8. `vertical-algin`

案例：
在这里插入图片描述
解决：

同级元素设置相同垂直位置
属性值：

设计思路（实现过程）

表单验证test1

1. 下方提交按钮

cursor的状态随上方checkbox的状态决定，即写一个checkbox的点击事件，是否选中属性为checked属性(true false),选中后背景变色（添加类，提高优先级），改变cursor，属性改变时再相应改变，并将表单的内容提交至指定后端接口（action）,方式method一般使用post；

  ckbox.onclick = function () {
            if (this.checked) {
                subinfo.className = "bgcolor";
                subinfo.style.cursor = "pointer";
            }
            else {
                subinfo.className = "";
                subinfo.style.cursor = "not-allowed";
            }
        }

2. 表单提交事件

未勾选时禁止提交（表单禁止提交事件onsubmit:return false），勾选时再验证每个选项是否满足条件

/*2.表单提交事件*/
        userform.onsubmit = function () {
            if (ckbox.checked) {
                /*再次判断各个文本框的情况确定返回值
                 * 所有获焦事件——先让所有元素获焦
                 * */
                for (var i = 0; i < userxyyz.length; i++) {
                    userxyyz[i].focus();
                }
                subinfo.focus();
                var errorlist = document.getElementsByClassName("spaninfo error");
                var errorlength = errorlist.length;
                if (errorlength) {
                    return false;
                }
                else {
                    return true;
                }
            }
            else {
                return false;
            }
        }

3. 验证每个选项

给每个需要验证的选项添加类名称，获取并验证

1）当点击了提交按钮后还需要判断每个选项是否符合要求，此时元素首先需要获取焦点，再写失去焦点的事件（判断是否满足条件）

2）最后一个的失焦事件需要单独写（之前的元素是当后一个元素获焦时自动失焦，所以当最后一个元素获焦后要单独再写一遍，让后面的提交按钮获焦，否则不会自动失焦）

3）在失焦时判断每个框，首先要有能单独区分每个框的属性（比如单独添加了id属性）

        /*3.所有失焦事件*/
        for (var i = 0; i < userxyyz.length; i++) {
            userxyyz[i].index = i;
            userxyyz[i].onblur = function () {
//                console.log(i);
                /*验证每一个框*/
//                userformlist[this.id](this);
                userformlist[this.id].call(this);
            }
        }

4. 自定义对象

1）失焦后要将对象传至自定义对象中，有两种方法；元素this指针替换call和apply 也可以直接传参
userformlist[this.id](this);

2）在自定义对象里把每个框里的内容去除空格判断完成后，返回true或false,添加error红字部分，添加索引（for循环内，失焦事件之前，否则i值等于5），判断输入是否合法

3）是否能正常提交取决于error的个数

4）为了方便修改提示信息，减少bug，动态增加修改类名称为success或者error;否则当输入信息正确后errorlength的长度仍为5，无法提交成功,默认状态为success

5. 每个框的正则判断

1）在每个添加类名success的地方再进行判断（每个条件一次添加判断即可）

2）错误提示信息一般会写在多个span中，否则第二次输入错误后，提示信息需要在需要的地方重新设置

3）在匹配时使用精确匹配（/^&/），比如在匹配电话号码时如果没有使用精确匹配则只要是以数字开头则可以匹配成功

4）验证码匹配还未实现，因为要获取后端数据

   var userformlist = {
            userid: function () {
                if (this.value.trim()) {
                    if (this.value.trim().length >= 4 && this.value.trim().length <= 20) {
                        if (this.value.trim().match(/^[0-9]{4,20}$/)) {
                            spaninfo[this.index].className = "spaninfo success";
                            spaninfoone[this.index].className = "spaninfoone error";
                        }
                        else {
                            spaninfo[this.index].className = "spaninfo success";
                            spaninfoone[this.index].className = "spaninfoone success";
                        }
                    }
                    else {
                        spaninfo[this.index].className = "spaninfo error";
                        spaninfoone[this.index].className = "spaninfoone success";
                }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            },
            userpwd: function () {
                if (this.value.trim()) {
                    if (this.value.trim().length >= 7 && this.value.trim().length <= 20) {
                        if(this.value.trim().match(/^[0-9]+[a-zA-Z]+[_]+$/)||
                                this.value.trim().match(/^[a-zA-Z]+[0-9]+[_]+$/)||
                                this.value.trim().match(/^[a-zA-Z]+[_]+[0-9]$/)||
                                this.value.trim().match(/^[0-9]+[_]+[a-zA-Z]$/)||
                                this.value.trim().match(/^[_]+[a-zA-Z]+[0-9]$/)||
                                this.value.trim().match(/^[_]+[0-9]+[a-zA-Z]$/)
                        ){
                            spaninfo[this.index].className = "spaninfo success";
                            spaninfoone[this.index].className = "spaninfoone success";
                        }
                        else{
                            spaninfo[this.index].className = "spaninfo success";
                            spaninfoone[this.index].className = "spaninfoone error";
                        }
                    }
                    else{
                        spaninfo[this.index].className = "spaninfo error";
                        spaninfoone[this.index].className = "spaninfoone success";
                    }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            },
            userpwdnew: function () {
                if (this.value.trim()) {
                   if(this.value.trim()==userxyyz[this.index-1].value.trim()){
                       spaninfo[this.index].className = "spaninfo success";
                       spaninfoone[this.index].className = "spaninfoone success";
                   }
                    else{
                       spaninfoone[this.index].className = "spaninfoone error";
                       spaninfo[this.index].className = "spaninfo success";
                   }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            },
            usertel: function () {
                if (this.value.trim()) {
                    if(this.value.trim().match(/^1(3|4|5|6|8)\d{9}$/)){
                        spaninfo[this.index].className = "spaninfo success";
                        spaninfoone[this.index].className = "spaninfoone success";
                    }
                    else {
                        spaninfo[this.index].className = "spaninfo success";
                        spaninfoone[this.index].className = "spaninfoone error";
                    }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            },
            useryz: function () {
                if (this.value.trim()) {
                    if(this.value.trim().match(/^\d{6}$/)){
                        spaninfo[this.index].className = "spaninfo success";
                        spaninfoone[this.index].className = "spaninfoone success";
                    }
                    else {
                        spaninfo[this.index].className = "spaninfo success";
                        spaninfoone[this.index].className = "spaninfoone error";
                    }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            }
        }

6. 添加密码眼睛事件

切换type类型:password<->text

 /*5.添加密码眼睛事件*/
        eyebtn[0].onclick = function () {
            if (userxyyz[1].type == "password") {
                this.src = "./tea/img/eye.png";
                userxyyz[1].type = "text";
            }
            else {
                this.src = "./tea/img/eye1.png";
                userxyyz[1].type = "password";
            }
        }
        eyebtn[1].onclick = function () {
            if (userxyyz[2].type == "password") {
                this.src = "./tea/img/eye.png";
                userxyyz[2].type = "text";
            }
            else {
                this.src = "./tea/img/eye1.png";
                userxyyz[2].type = "password";
            }
        }

还可以使用for循环遍历（注意索引值的修改）

        //添加密码上img 的事件
        for(var i=0;i<eyebtn.length;i++){
            eyebtn[i].index = i;
            eyebtn[i].onclick = function () {
                if (useritem[this.index+1].type == "password") {
                    this.src = "./img/eye.png";
                    useritem[this.index+1].type = "text";
                }
                else {
                    this.src = "./img/eye1.png";
                    useritem[this.index+1].type = "password";
                }
            }
        }

完整代码

css样式

 <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        ul li {
            list-style: none;
            outline: none;
        }

        a {
            text-decoration: none;
        }

        body {
            background: #c2c2c2;
        }

        .big {
            width: 900px;
            height: 600px;
            margin: auto;
            background: white;
        }

        ul {
            padding-top: 20px;
        }

        li {
            width: 300px;
            height: 35px;
            list-style: none;
            margin: 30px auto;
            position: relative;
        }

        li > input[type=text], li > input[type=password] {
            width: 300px;
            height: 35px;
            border: 1px solid #dddddd;
            padding-left: 40px;
        }

        li > input[type=text]:hover, li > input[type=password]:hover {
            border-color: #45c3ff;
        }

        .ck > span {
            font-size: 12px;
            vertical-align: bottom;
        }

        .ck > input {
            vertical-align: bottom;
        }

        li > input[type=submit] {
            width: 300px;
            height: 35px;
            color: #fff;
            background: #cacaca;
            border: 1px solid #cacaca;
            font-size: 16px;
        }

        li > i {
            position: absolute;
            top: 5px;
            left: 8px;
            font-size: 20px !important;
        }

        .tel > span {
            position: absolute;
            left: 25px;
            top: 7px;
        }

        .tel input {
            padding-left: 70px !important;
        }

        .yzm button {
            width: 100px;
            height: 35px;
            color: #fff;
            float: right;
            background: #cacaca;
            border: 1px solid #cacaca;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }

        .yzm input {
            width: 190px !important;
            /*float: left;*/
            height: 35px;
        }

        .big > div {
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            padding-bottom: 20px;
            border-bottom: solid 1px #999;
        }

        .eyebtn {
            position: absolute;
            right: 1rem;
            top: .6rem;
            width: 1.3rem;
        }

        .bgcolor {
            background: #7578ff !important;
        }

        .info {
            position: absolute;
        }

        .error {
            color: rgba(244, 0, 0, 0.87);
            font-size: 10px;
            display: block;
        }

        .success {
            display: none;
        }

        .successone {
            display: none;
        }
    </style>

html结构

<body>
<div class="big">
    <div>欢迎注册京东云账号</div>
    <form class="userform" action="" method="post">
        <ul>
            <li>
                <i class="iconfont">&#xf00ec;</i>
                <input id="userid" class="userxyyz" name="userid" type="text" placeholder="请输入用户名"/>

                <div class="info">
                    <span class="spaninfo success">*输入的用户名长度必须在4-20位之间</span>
                    <span class="spaninfoone successone">*账号不能是纯数字</span>
                </div>
            </li>
            <li>
                <i class="iconfont">&#xf00c9;</i>
                <input id="userpwd" class="userxyyz" name="userpwd" type="password" placeholder="请输入密码"/>
                <img class="eyebtn" src="./tea/img/eye1.png" alt=""/>

                <div class="info">
                    <span class="spaninfo success">*密码长度必须在7-20位之间</span>
                    <span class="spaninfoone successone">*密码中要包含数字、字母和符号</span>
                </div>
            </li>

            <li>
                <i class="iconfont">&#xf00c9;</i>
                <input id="userpwdnew" class="userxyyz" type="password" placeholder="请再次输入密码"/>
                <img class="eyebtn" src="./tea/img/eye1.png" alt=""/>

                <div class="info">
                    <span class="spaninfo success">*确认密码不能为空!</span>
                    <span class="spaninfoone successone">*两次密码不一致!</span>
                </div>
            </li>
            <li class="tel">
                <i class="iconfont">&#xf00e5;</i>
                <span>+86</span>
                <input id="usertel" class="userxyyz" name="usertel" type="text" placeholder="输入常用手机号"/>

                <div class="info">
                    <span class="spaninfo success">*手机号不能为空！</span>
                    <span class="spaninfoone successone">*手机号输入有误，请重新输入！</span>
                </div>
            </li>
            <li class="yzm"><i class="iconfont">&#xf0102;</i>
                <input id="useryz" class="userxyyz" type="text" placeholder="输入六位验证码"/>
                <button>发送验证码</button>
                <div class="info">
                    <span class="spaninfo success">*验证码不能为空</span>
                    <span class="spaninfoone success">*验证码输入有误</span>
                </div>
            </li>
            <li class="ck">
                <input id="ckbox" type="checkbox"/>
        <span>我已阅读并同意
        <a href="">《隐私协议》</a>
        <a href="">《京东云服务协议》</a>
        </span>
            </li>
            <li>
                <input id="subinfo" type="submit" value="同意并注册"/>
            </li>
        </ul>
    </form>
</div>
</body>

js样式

<script>
    window.onload = function () {
        /*4.定义 自定义对象逐个验证*/
        var userformlist = {
            userid: function () {
                if (this.value.trim()) {
                    if (this.value.trim().length >= 4 && this.value.trim().length <= 20) {
                        if (this.value.trim().match(/^[0-9]{4,20}$/)) {
                            spaninfo[this.index].className = "spaninfo success";
                            spaninfoone[this.index].className = "spaninfoone error";
                        }
                        else {
                            spaninfo[this.index].className = "spaninfo success";
                            spaninfoone[this.index].className = "spaninfoone success";
                        }
                    }
                    else {
                        spaninfo[this.index].className = "spaninfo error";
                        spaninfoone[this.index].className = "spaninfoone success";
                }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            },
            userpwd: function () {
                if (this.value.trim()) {
                    if (this.value.trim().length >= 7 && this.value.trim().length <= 20) {
                        if(this.value.trim().match(/^[0-9]+[a-zA-Z]+[_]+$/)||
                                this.value.trim().match(/^[a-zA-Z]+[0-9]+[_]+$/)||
                                this.value.trim().match(/^[a-zA-Z]+[_]+[0-9]$/)||
                                this.value.trim().match(/^[0-9]+[_]+[a-zA-Z]$/)||
                                this.value.trim().match(/^[_]+[a-zA-Z]+[0-9]$/)||
                                this.value.trim().match(/^[_]+[0-9]+[a-zA-Z]$/)
                        ){
                            spaninfo[this.index].className = "spaninfo success";
                            spaninfoone[this.index].className = "spaninfoone success";
                        }
                        else{
                            spaninfo[this.index].className = "spaninfo success";
                            spaninfoone[this.index].className = "spaninfoone error";
                        }
                    }
                    else{
                        spaninfo[this.index].className = "spaninfo error";
                        spaninfoone[this.index].className = "spaninfoone success";
                    }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            },
            userpwdnew: function () {
                if (this.value.trim()) {
                   if(this.value.trim()==userxyyz[this.index-1].value.trim()){
                       spaninfo[this.index].className = "spaninfo success";
                       spaninfoone[this.index].className = "spaninfoone success";
                   }
                    else{
                       spaninfoone[this.index].className = "spaninfoone error";
                       spaninfo[this.index].className = "spaninfo success";
                   }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            },
            usertel: function () {
                if (this.value.trim()) {
                    if(this.value.trim().match(/^1(3|4|5|6|8)\d{9}$/)){
                        spaninfo[this.index].className = "spaninfo success";
                        spaninfoone[this.index].className = "spaninfoone success";
                    }
                    else {
                        spaninfo[this.index].className = "spaninfo success";
                        spaninfoone[this.index].className = "spaninfoone error";
                    }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            },
            useryz: function () {
                if (this.value.trim()) {
                    if(this.value.trim().match(/^\d{6}$/)){
                        spaninfo[this.index].className = "spaninfo success";
                        spaninfoone[this.index].className = "spaninfoone success";
                    }
                    else {
                        spaninfo[this.index].className = "spaninfo success";
                        spaninfoone[this.index].className = "spaninfoone error";
                    }
                }
                else {
                    spaninfo[this.index].className = "spaninfo error";
                    spaninfoone[this.index].className = "spaninfoone success";
                }
            }
        }

        var ckbox = document.getElementById("ckbox");
        var subinfo = document.getElementById("subinfo");
        var userform = document.getElementsByClassName("userform")[0];
        var userxyyz = document.getElementsByClassName("userxyyz");
        var spaninfo = document.getElementsByClassName("spaninfo");
        var spaninfoone = document.getElementsByClassName("spaninfoone");
        var eyebtn = document.getElementsByClassName("eyebtn");


        /*
         * 1.下方提交按钮的cursor样式变化
         * */
        ckbox.onclick = function () {
            if (this.checked) {
                subinfo.className = "bgcolor";
                subinfo.style.cursor = "pointer";
            }
            else {
                subinfo.className = "";
                subinfo.style.cursor = "not-allowed";
            }
        }
        /*3.所有失焦事件*/
        for (var i = 0; i < userxyyz.length; i++) {
            userxyyz[i].index = i;
            userxyyz[i].onblur = function () {
//                console.log(i);
                /*验证每一个框*/
//                userformlist[this.id](this);
                userformlist[this.id].call(this);
            }
        }
        /*2.表单提交事件*/
        userform.onsubmit = function () {
            if (ckbox.checked) {
                /*再次判断各个文本框的情况确定返回值
                 * 所有获焦事件——先让所有元素获焦
                 * */
                for (var i = 0; i < userxyyz.length; i++) {
                    userxyyz[i].focus();
                }
                subinfo.focus();
                var errorlist = document.getElementsByClassName("spaninfo error");
                var errorlength = errorlist.length;
                if (errorlength) {
                    return false;
                }
                else {
                    return true;
                }
            }
            else {
                return false;
            }
        }
        /*5.添加密码眼睛事件*/
        eyebtn[0].onclick = function () {
            if (userxyyz[1].type == "password") {
                this.src = "./tea/img/eye.png";
                userxyyz[1].type = "text";
            }
            else {
                this.src = "./tea/img/eye1.png";
                userxyyz[1].type = "password";
            }
        }
        eyebtn[1].onclick = function () {
            if (userxyyz[2].type == "password") {
                this.src = "./tea/img/eye.png";
                userxyyz[2].type = "text";
            }
            else {
                this.src = "./tea/img/eye1.png";
                userxyyz[2].type = "password";
            }
        }
    }
</script>