欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-05-14 22:18:30
...

案例分析

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

   会员注册 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_-][email protected][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>
相关标签: # JS