DOM编程案例 —— 登录页面表单验证

最新推荐文章于 2023-09-13 17:26:25 发布

少年西西

最新推荐文章于 2023-09-13 17:26:25 发布

阅读量691

点赞数

分类专栏： D_JavaWeb阶段 # D2_JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45554909/article/details/111500043

版权

D_JavaWeb阶段同时被 2 个专栏收录

104 篇文章 2 订阅

订阅专栏

D2_JavaScript

20 篇文章 0 订阅

订阅专栏

要求：

用户名不能为空
用户名必须在6-14位之间
用户名只能数字和字母组成，不能含其它符号（正则表达式
密码和确认密码一致，邮箱地址合法。
统一失去焦点验证
错误提示信息统一在span标签中提示，并且要求字体12号，红色。
文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
最终表单中所有项均合法方可提交

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>

    <style type="text/css">
        span {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<!--
（1用户名不能为空
（2用户名必须在6-14位之间
（3用户名只能数字和字母组成，不能含其它符号（正则表达式
（4密码和确认密码一致，邮箱地址合法。
（5统一失去焦点验证
（6错误提示信息统一在span标签中提示，并且要求字体12号，红色。
（7文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
（8最终表单中所有项均合法方可提交
-->
<body>
<script type="text/javascript">


    window.onload = function () {

        var usernameObj = document.getElementById("username");
        var usernameError = document.getElementById("error");
        var passwordObj = document.getElementById("password");
        var passwordError = document.getElementById("error1");
        var passwordObj1 = document.getElementById("password1");
        var passwordError1 = document.getElementById("error2");
        var emailObj = document.getElementById("email");
        var emailError = document.getElementById("error3");

        usernameObj.onblur = function () {
            console.log("失去焦点");
            //保证用户名合法
            var username = usernameObj.value;
            username = username.trim();
            var usernameValue = /^[0-9a-zA-Z]{6,14}$/
            if (username === "") {
                usernameError.innerText = "用户名不能为空!";
            } else if (!(usernameValue.test(username))) {
                usernameError.innerText = "用户名必须在6-14位之间," +
                    "并且只能数字和字母组成，不能含其它符号";
            }

        }
        //用户名得到焦点
        usernameObj.onfocus = function () {
            if (usernameError.innerText != "") {
                usernameObj.value = "";
            }
            usernameError.innerText = "";
        }

        //保证密码合法
        passwordObj.onblur = function () {
            console.log("失去焦点");
            var password = passwordObj.value;
            password = password.trim();
            if (password === "") {
                passwordError.innerText = "密码不能为空";
            }

        }
        passwordObj.onfocus = function () {
            if (passwordError.innerText != "") {
                passwordObj.value = "";
            }
            passwordError.innerText = "";
        }
        //保证确认密码合法
        passwordObj1.onblur = function () {
            console.log("失去焦点");
            var password1 = passwordObj1.value;
            var password = passwordObj.value;
            password = password.trim();
            password1 = password1.trim();
            if (!(password === password1)) {
                passwordError1.innerText = "输入密码不一致";
            }

        }
        passwordObj1.onfocus = function () {
            if (passwordError1.innerText != "") {
                passwordObj1.value = "";
            }
            passwordError1.innerText = "";
        }

        //保证邮箱合法
        emailObj.onblur = function () {
            console.log("失去焦点");
            //保证用户名合法
            var email = emailObj.value;
            email = email.trim();
            var emailValue = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (email === "") {
                emailError.innerText = "邮箱不能为空!";
            } else if (!(emailValue.test(email))) {
                emailError.innerText = "邮箱地址不合法";
            }
        }


        emailObj.onfocus = function () {
            if (emailError.innerText != "") {
                emailObj.value = "";
            }
            emailError.innerText = "";
        }
        // 给提交钮绑定鼠标单击事件
        document.getElementById("btn1").onclick = function () {
            // 触发username的blur userpwd2的blur email的blur
            // 不需要人工操作,使用纯JS代码触发事件.
            usernameObj.focus();
            usernameObj.blur();

            passwordObj.focus();
            passwordObj.blur();

            passwordObj1.focus();
            passwordObj1.blur();

            emailObj.focus();
            emailObj.blur();

            // 当所表单项都是合法的时候,提交表单
            if (usernameError.innerText == "" && passwordError.innerText == "" && passwordError1.innerText == "" && emailError.innerText == "") {
                // 获取表单对象
                var formObj = document.getElementById("form");
                // 可以在这里设置action,也可以不在这里.
                // formObj.action = "http://localhost:8080/jd/save";
                // 提交表单
                formObj.submit();
            }

        }

    }
</script>
<form action="http://localhost:8080" method="post" id="form">
    <table align="center">
        <tr>
            <th colspan="2">用户登录界面</th>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>用 &nbsp;户 &nbsp;名</td>
            <td><input type="text" name="username" id="username"/>&nbsp;&nbsp;<span id="error"></span></td>
        </tr>
        <tr>
            <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</td>
            <td><input type="password" name="userpwd" id="password"/>&nbsp;&nbsp;<span id="error1"></span></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password" id="password1"/>&nbsp;&nbsp;<span id="error2"></span></td>
        </tr>
        <tr>
            <td>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</td>
            <td><input type="text" name="email" id="email"/>&nbsp;&nbsp;<span id="error3"></span></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="button" id="btn1" value="登录"/>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
                <input type="reset" id="btn2" value="清空"/></td>
        </tr>
    </table>
</form>

</body>
</html>

少年西西

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
DOM编程案例 —— 登录页面表单验证

要求：用户名不能为空用户名必须在6-14位之间用户名只能数字和字母组成，不能含其它符号（正则表达式密码和确认密码一致，邮箱地址合法。统一失去焦点验证错误提示信息统一在span标签中提示，并且要求字体12号，红色。文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value最终表单中所有项均合法方可提交代码：<!DOCTYPE html><html lang="en"><head> <meta chars
复制链接

扫一扫

专栏目录