使用JS完成注册页面的校验

Christina_cyw

于 2021-02-25 14:09:25 发布

阅读量1k

点赞数 1

分类专栏： # JS

by Chris

本文链接：https://blog.csdn.net/Christina_cyw/article/details/114079860

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

案例分析

实现注册表单的基本验证功能，主要实现非空验证、重复输入验证、邮箱验证（正则验证）、聚焦清空

会员注册 USER REGISTER
用户名
密码
确认密码
Email
姓名
性别
出生日期
验证码

placeholder：提示
onblur：光标失去焦点
onfocus：获得光标焦点事件
innerText添加文本与innerHTML区别
.innerText=”<font color=red>a</font>“
.innerHTML=”<font color=red>a</font>“

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册页面</title>

    <script>
        //整个表单提交验证
        function checkForm() {
          
            return checkUserName() & checkPwd() & recheckPwd() & checkEmail();
         
        }
     
        function checkUserName() {
            //用户名不能为空  
            var userName = document.getElementById("userName").value;
            var name = document.getElementById("name");
            if (userName == "") {
                name.color = "red";
                name.innerHTML = "用户名不能为空";
                return false
            }
            name.innerHTML = "√";
            name.color = "green";
            return true;
           
        }

        function checkPwd() {
            //验证密码
            var password = document.getElementById("password").value;
            //alert(password);
            var pwd = document.getElementById("pwd");
            var reg = /[0-9]{6}/;
            if (password == "") {
                pwd.color = "red";
                pwd.innerHTML="密码不能为空!";
                return false;
            }
            if (!reg.test(password)) {
                // alert("密码必须是6位数字!");
                pwd.color = "red";
                pwd.innerHTML = "密码必须是6位数字!";
                return false;
            }
            pwd.innerHTML = "√";
            pwd.color = "green";
            return true;
        }
        function recheckPwd() {
            var password = document.getElementById("password").value;
            var repassword = document.getElementById("repassword").value;
            var repwd = document.getElementById("repwd");
            if (repassword == "") {
                repwd.color = "red";
                repwd.innerHTML="密码不能为空!";
                return false;
            }
            if (repassword != password) {
                repwd.color = "red";
                document.getElementById("repwd").innerHTML="两次密码不一致!";
                return false;
            }
            repwd.innerHTML = "√";
            repwd.color = "green";
            return true;
        }
        function checkEmail() {
            //邮箱验证
            var email = document.getElementById("email").value;
            var eml=document.getElementById("eml")
            //正则表达式,以下表达式就是一个正则对象
            var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            if (!reg.test(email)) {
                eml.color="red"
                eml.innerHTML="邮箱格式不正确!";
                return false;
            }
            eml.innerHTML = "√";
            eml.color = "green";
            return true;
        }

        function clearText(inpId, fontId) {
            document.getElementById(inpId).value = "";
            document.getElementById(fontId).innerHTML = "";

        }


    </script>
</head>
<body>
    <!-- onsubmit:表单提交事件 -->
    <!-- return false就会阻止提交,return true提交表单 -->
    <form action="success.html" method="post" onsubmit="return checkForm()">
        <table border="0" width="900" height="500" align="center">
            <tr>
                <td colspan="2">
                    <font color="blue" size="5">&nbsp;&nbsp;&nbsp;会员注册</font>
                    USER REGISTER
                </td>
            </tr>
            <tr>
                <td align="right">用户名&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                    <!-- placeholder:提示属性 -->
                    <!-- onblur光标移开触发的事件 -->
                    <input type="text" size="50" placeholder="请输入用户名" id="userName" onblur="checkUserName()" onfocus="clearText('userName','name')"/>
                    <font id="name"></font>
                </td>
            </tr>
            <tr>
                <td align="right">密码&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                    <input type="password" size="50" placeholder="请输入密码" id="password" onblur="checkPwd()" onfocus="clearText('password','pwd')"/>
                    <font  id="pwd"></font>
                </td>
            </tr>
            <tr>
                <td align="right">确认密码&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                    <input type="password" size="50" placeholder="请输入确认密码" id="repassword" onblur="recheckPwd()" onfocus="clearText('repassword','repwd')"/>
                    <font id="repwd"></font>
                </td>
            </tr>
            <tr>
                <td align="right">Email&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                    <input type="email" size="50" placeholder="Email" id="email" onblur="checkEmail()" onfocus="clearText('email','eml')"/>
                    <font id="eml"></font>
                </td>
            </tr>
            <tr>
                <td align="right">姓名&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                    <input type="text" size="50" placeholder="请输入姓名" />
                    <font id="pwd"></font>
                </td>
            </tr>
            <tr>
                <td align="right">性别&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                    <input type="radio" name="sex" checked="checked" />男
                    <input type="radio" name="sex" />女
                </td>
            </tr>
            <tr>
                <td align="right">出生日期&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                    <!-- 1990/04/12 -->
                    <input type="text" size="50" placeholder="年/月/日" />
                </td>
            </tr>
            <tr>
                <td align="right">验证码&nbsp;&nbsp;&nbsp;&nbsp;</td>
                <td>
                    <input type="text" size="30" />
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="submit" value="注册" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>