表单验证的实现

最新推荐文章于 2024-03-01 20:16:14 发布

想被带飞的鱼

最新推荐文章于 2024-03-01 20:16:14 发布

阅读量224

点赞数

分类专栏： Javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_62008199/article/details/123319780

版权

Javascript 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

表单验证

实现输入的内容符合我制定的标准返回√否则返回X，在点击提交按钮的时候，只有在我输入的表单域全部符合我制定的标准时，才能提交过去

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
</head>

<body>
    <form action="#">
        <label for="userName">用户名：</label>
        <input type="text" name="" id="userName"><span class="span1"></span>
        <br>
        <label for="userPwd">密码：</label>
        <input type="password" name="" id="userPwd"><span class="span2"></span>
        <br>
        <label for="userRepwd">确认密码：</label>
        <input type="password" name="" id="userRepwd"><span class="span3"></span>
        <br>
        <label for="userEmail">邮箱:</label>
        <input type="email" name="" id="userEmail"><span class="span4"></span>
        <br>
        <input type="submit" value="提交" id="submit">
    </form>
    <script>
        let userName = document.getElementById("userName");
        let userPwd = document.getElementById("userPwd");
        let userRepwd = document.getElementById("userRepwd");
        let userEmail = document.getElementById("userEmail");
        let submit = document.getElementById("submit");
        let span1 = document.querySelector(".span1");
        let span2 = document.querySelector(".span2");
        let span3 = document.querySelector(".span3");
        let span4 = document.querySelector(".span4");
        //封装事件
        function obj(user, span, add) {
            return function () {
                if (add.test(user.value)) {
                    span.innerHTML = "√";
                    span.style.color = "green";
                    return true;
                } else {
                    span.innerHTML = "×";
                    span.style.color = "red";
                    return false
                }
            }

        }
        //重复密码
        let rePwd = function () {
            if (/^\w{6,20}$/.test(userRepwd.value) && userRepwd.value == userPwd.value) {
                span3.innerHTML = "√";
                span3.style.color = "green";
                return true;
            } else {
                span3.innerHTML = "×";
                span3.style.color = "red";
                return false
            }
        }

        //判断用户名
        let usernamePd = /^\w{6,20}$/;
        userName.onblur = obj(userName, span1, usernamePd);

        //判断密码
        let userpwdPd = /^\w{6,20}$/;
        userPwd.onblur = obj(userPwd, span2, userpwdPd);

        //重复密码
        userRepwd.onblur = rePwd;

        //判断邮箱
        let useremailPd = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        userEmail.onblur = obj(userEmail, span4, useremailPd);


        //提交事件
        document.forms[0].onsubmit = function (e) {

            if (obj(userName, span1, usernamePd)() && obj(userPwd, span2, userpwdPd)() && obj(userEmail, span4, useremailPd)() && rePwd()) {
                console.log(userName.value, userPwd.value, userEmail.value);
            }
            else {
                alert("请检查输入得是否正确")
                e.preventDefault();
            }
        }
    </script>
</body>

</html>