JS注册页面，带提示信息

最新推荐文章于 2022-10-31 00:12:10 发布
文质木木
最新推荐文章于 2022-10-31 00:12:10 发布
阅读量1w
点赞数 4
本文链接：https://blog.csdn.net/qq_41559516/article/details/81486672
版权

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>用户注册</title>
        
        
        <style type="text/css">
            span{
                color: red;
            }
        </style>
        <script type="text/javascript">
            /*
                 账号：6~10位字母、数字、下划线，第一个字符必须是字母
                     /^[a-zA-Z][\w]{5,9}$/
                 密码：6~10位数字
                     /^[\d]{6,10}$/
             * */
            //验证用户名
            function checkUsername(id, infoId){
                var reg = /^[a-zA-Z][\w]{5,9}$/;
                var txtUsername= document.getElementById(id).value;
                if(!reg.test(txtUsername)){
                    setInfo(infoId,'用户名必须为6-10位字母数字，第一位是字母');
                    return false;
                }
                return true;
            }
            
            //设置提示信息
            function setInfo(id, info){
                document.getElementById(id).innerText=info;
            }
            
            //验证密码
            function checkPassword(id, infoId) {
                var reg = /^[\d]{6,10}$/;
                var txtPassword = document.getElementById(id).value;
                if(!reg.test(txtPassword)) {
                    setInfo(infoId,'密码必须为6~10位数字');
                    return false;
                }
                return true;
            }
            //重复密码
            function checkPasswordAgain(pwd1, pwd2, infoId){
                var txtPwd1 = document.getElementById(pwd1).value;
                var txtPwd2 = document.getElementById(pwd2).value;
                if(txtPwd1!= txtPwd2){
                    setInfo(infoId, "与密码完全一致");
                    return false;
                }
                var reg = /^[0-9]{6,10}$/;
                if(!reg.test(txtPwd2)) {
                    setInfo(infoId,'密码必须为6~10位数字');
                    return false;
                }
                return true;
            }
            
            
            //电子邮箱
            function checkEmail(id, infoId) {
                var reg = /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/;
                var txtEmail = document.getElementById(id).value;
                if(!reg.test(txtEmail)) {
                    setInfo(infoId, '请输入正确邮箱地址');
                    return false;
                }
                return true;
            }
                
            //电话号码
            function checkTel(id, infoId) {
                var reg = /^[1][0-9]{10}$/;
                var txtTel = document.getElementById(id).value;
                if(!reg.test(txtTel)) {
                    setInfo(infoId,'请输入正确手机号');
                    return false;
                }
                return true;
            }
                
                    //QQ
            function checkQq(id, infoId) {
                var reg = /^[1-9][0-9]{4,}$/;
                var txtQq = document.getElementById(id).value;
                if(!reg.test(txtQq)) {
                    setInfo(infoId, '请输入正确QQ号');
                    return false;
                }
                return true;
            }
                
                //清除信息
            function clearInfo(id) {
                document.getElementById(id).innerText=" ";
            }
            
            //校验所有表单元素的内容
            function checkAll() {
                if(checkUsername('username','usernameInfo')&checkPassword('pass', 'passwordInfo')&checkPasswordAgain('pass', 'passwordAgain', 'passwordAgainInfo')&checkEmail('email', 'emailInfo')&checkTel('tel', 'telInfo')&checkQq('qq', 'qqInfo')) {
                    return true;
                }                
                return false;
            }
        </script>
    </head>

    <body>
        <form action="http://www.baidu.com" method="post" onsubmit="return checkAll();">
            <table>
                
                <tr>
                    <td>
                        <label>账号</label>
                    </td>
                    <td>
                        <input type="text" id="username" placeholder="请输入账号" autofocus="autofocus" onblur="checkUsername('username', 'usernameInfo')" onfocus="clearInfo('usernameInfo')"/>
                    </td>
                    <td>
                        <span id="usernameInfo"></span>
                    </td>
                </tr>
                
                <tr>
                    <td>
                        <label>密码</label>
                    </td>
                    <td>
                        <input type="password" id="pass" placeholder="请输入密码" onblur="checkPassword('pass', 'passwordInfo')" onfocus="clearInfo('passwordInfo')" />
                    </td>
                    <td>
                        <span id="passwordInfo"></span>
                    </td>
                </tr>

                <tr>
                    <td>
                        <label>重复密码</label>
                    </td>
                    <td>
                        <input type="password" id="passwordAgain" placeholder="请再次输入密码" onblur="checkPasswordAgain('pass', 'passwordAgain', 'passwordAgainInfo')" onfocus="clearInfo('passwordAgainInfo')" />
                    </td>
                    <td>
                        <span id="passwordAgainInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>邮箱</label>
                    </td>
                    <td>
                        <input type="text" id="email" placeholder="请输入电子邮箱" onblur="checkEmail('email', 'emailInfo')" onfocus="clearInfo('emailInfo')" />
                    </td>
                    <td>
                        <span id="emailInfo"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <label>手机号</label>
                    </td>
                    <td>
                        <input type="text" id="tel" placeholder="请输入手机号" onblur="checkTel('tel', 'telInfo')" onfocus="clearInfo('telInfo')" />
                    </td>
                    <td>
                        <span id="telInfo"></span>
                    </td>
                </tr>

                <tr>
                    <td>
                        <label>QQ</label>
                    </td>
                    <td>
                        <input type="text" id="qq" placeholder="请输入QQ" onblur="checkQq('qq', 'qqInfo')" onfocus="clearInfo('qqInfo')" />
                    </td>
                    <td>
                        <span id="qqInfo"></span>
                    </td>
                </tr>

                <tr>
                    <td colspan="6">
                        <button type="submit">注册</button>
                    </td>
                </tr>
            </table>
        </form>
    </body>

</html>