JavaScript中利用表单注册账号

最新推荐文章于 2024-07-17 15:26:15 发布
ab_dk
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量266
点赞数
文章标签： javascript
本文链接：https://blog.csdn.net/ab_dk/article/details/105232448
版权
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action="01_作业.html">
        注册帐号:<input type="text" name="user" placeholder="请输入帐号" maxlength="16"><span name='username'></span><br>
        &nbsp密 码 ： <input type="password" name="ps" placeholder="请输入密码" maxlength="16"><span name='password'></span><br>
        重复密码:<input type="password" name="dbps" placeholder="请重复密码" maxlength="16"><span name='dbpassword'></span><br>
        验 证 码 :<input type="text" name="vcode" placeholder="请输入验证码" maxlength="6" >
        <span name='vc'></span><button type="button" name="reset">刷新</button><span name='vcspan'></span>
        <br>
        <button>提交</button>
    </form>


    <script>
        var str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var oVc = document.querySelector('[name="vc"]'); 
        var oV = setVc(str);
    
        oVc.innerHTML = oV;

        //  刷新验证码
        var btnReset = document.querySelector('[name="reset"]');  
        btnReset.onclick = function(){
            oVc.innerHTML = setVc(str);
        }

        //  提示信息
        //  帐号提示信息
        var oSpanUsername = document.querySelector('[name="username"]'); 
        var oUser = document.querySelector('[name="user"]'); 
        
        
        //  帐号提示信息：当鼠标点击输入框时出现提示信息：请您输入8-16位帐号
        oUser.onfocus = function(){
            oSpanUsername.innerHTML = '请您输入帐号，长度为8-16位'
            oSpanUsername.style.color = 'black';
        }

        //  输入帐号时提示当前输入多少位
        oUser.oninput = function(){
            var oUserValue = oUser.value;
            oSpanUsername.innerHTML = `您当前输入的位数为${oUserValue.length},还可以输入${16-oUserValue.length}个字符`;
            oSpanUsername.style.color = 'black';
        }

        //  当输入完毕失去焦点时，判断输入的数据是否符合规范
        oUser.onchange = function(){
            var oUserValue = oUser.value;
            if( oUserValue.length >= 8 && oUserValue.length <= 16  ){
                oSpanUsername.innerHTML = '您输入的帐号可用'
                oSpanUsername.style.color = 'black';
            }else{
                oSpanUsername.innerHTML = '您输入的帐号不可用'
                oSpanUsername.style.color = 'red';
            }
        } 
        
        
        //  提交时判断帐号是否符合规范，如果不符合规范不能提交
        var oForm = document.querySelector('form');
        oForm.onsubmit = function(e){
            var oUserValue = oUser.value;
            //  输入为空时的情况
            if( oUserValue === '' ){
                e.preventDefault();
                oSpanUsername.innerHTML = '您输入的帐号不能为空，请重新输入'
                oSpanUsername.style.color = 'red';
                return;
            }
            //  输入帐号长度不符合规范
            if( !(oUserValue.length >= 8 && oUserValue.length <= 16) ){
                e.preventDefault();
                oSpanUsername.innerHTML = '您输入的帐号位数错误，请重新输入'
                oSpanUsername.style.color = 'red';
                return;
            }
            
            //  提交时判断密码是否符合规范，如果不符合规范不能提交
            var oPsValue = oPs.value;
            //  输入为空时的情况
            if( oPsValue === '' ){
                e.preventDefault();
                oSpanPs.innerHTML = '您输入的密码不能为空，请重新输入'
                oSpanPs.style.color = 'red';
                return;
            }
            //  输入密码长度不符合规范
            if( !(oPsValue.length >= 8 && oPsValue.length <= 16) ){
                e.preventDefault();
                oSpanPs.innerHTML = '您输入的密码位数错误，请重新输入'
                oSpanPs.style.color = 'red';
                return;
            }

            //  提交时判断二次输入的密码是否符合规范，如果不符合规范不能提交
            var oDbPsValue = oDbPs.value;
            //  输入为空时的情况
            if( oDbPsValue === '' ){
                e.preventDefault();
                oSpanDbps.innerHTML = '您二次输入的密码不能为空，请重新输入'
                oSpanDbps.style.color = 'red';
                return;
            }
            //  两次输入的密码不相同不能提交
            if(oPsValue !==  oDbPsValue ){
                e.preventDefault();
                oSpanDbps.innerHTML = '您两次输入的密码不一致，请重新输入'
                oSpanDbps.style.color = 'red';
            }

            //  提交时判断验证码是否符合规范，如果不符合规范不能提交
             var oVcValue = oVcode.value
             if( oVcValue === '' ){
                e.preventDefault();
                oVcSpan.innerHTML = '验证码不能为空，请输入'
                oVcSpan.style.color = 'red';
                return;
            }
            //  两次验证码输入不一致不能提交
            var oVcValue = oVcode.value;
            if( oVcValue !== oV ){
                e.preventDefault();
                oVcSpan.innerHTML = '验证码不一致，请重新输入'
                oVcSpan.style.color = 'red';
            }
        }



        //  密码提示信息
        var oPs = document.querySelector('[name="ps"]'); 
        var oSpanPs = document.querySelector('[name="password"]');
       
        //  密码提示信息：当鼠标点击输入框时出现提示信息：请您输入8-16位密码
        oPs.onfocus = function(){
            oSpanPs.innerHTML = '请您输入密码，长度为8-16位'
            oSpanPs.style.color = 'black';
        }

        //  输入密码时提示当前输入多少位
        oPs.oninput = function(){
                    var oPsValue = oPs.value;
                    oSpanPs.innerHTML = `您当前输入的位数为${oPsValue.length},还可以输入${16-oPsValue.length}个字符`;
                    oSpanPs.style.color = 'black';
                }

        //  当输入完毕失去焦点时，判断输入的密码是否符合规范
        oPs.onchange = function(){
            var oPsValue = oPs.value;
            if( oPsValue.length >= 8 && oPsValue.length <= 16  ){
                oSpanPs.innerHTML = '您输入的密码可用'
                oSpanDbps.style.color = 'black';
            }else{
                oSpanPs.innerHTML = '您输入的密码不可用'
                oSpanPs.style.color = 'red';
            }
        }
       
        



        //  二次输入密码
        var oDbPs = document.querySelector('[name="dbps"]');
        var oSpanDbps = document.querySelector('[name="dbpassword"]');
        //  获取焦点，提示输入的密码必须与上次相同
        oDbPs.onfocus = function(){
            oSpanDbps.innerHTML = '请重复密码';
            oSpanDbps.style.color = 'black';
        }
       
        //  当输入完毕失去焦点时，判断输入的密码是否与上次相同
        oDbPs.onchange = function(){
            var oPsValue = oPs.value;
            var oDbPsValue = oDbPs.value;
            if( oDbPsValue ==  oPsValue){
                oSpanPs.innerHTML = '密码可用'
                oSpanPs.style.color = 'black';
                oSpanDbps.innerHTML = '';
            }else{
                oSpanPs.innerHTML = '两次输入密码不一致，请重新输入'
                oSpanPs.style.color = 'red';
                oSpanDbps.innerHTML = '';
            }
        } 
        

        //  验证码判断
        var oVcode = document.querySelector( '[name="vcode"]' )
        var oVcSpan = document.querySelector( '[name="vcspan"]' )
        
        //当输入完毕失去焦点时，判断验证码是否相同
        oVcode.onchange = function(){
            var oVcValue = oVcode.value;
            
            if( oVcValue === oV ){
                oVcSpan.innerHTML = '验证码输入正确'
                oVcSpan.style.color = 'black';
            }else{
                oVcSpan.innerHTML = '验证码不一致，请重新输入'
                oVcSpan.style.color = 'red';
            }
        }



        //  随机验证码生成
        function setVc(str) {
            var vc = '';
            while (vc.length < 6) {
                var num = parseInt(Math.random() * str.length);
                if (vc.indexOf(str[num]) === -1) {
                    vc += str[num];
                }
            }
            return vc;
        }
    </script>
</body>

</html>
ab_dk
关注
0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中利用表单注册账号

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫