编写注册新用户的模块JavaScript

最新推荐文章于 2021-06-29 16:40:31 发布

...lemon_...

最新推荐文章于 2021-06-29 16:40:31 发布

阅读量575

点赞数 1

分类专栏： frontEnd

本文链接：https://blog.csdn.net/qianqianNingmeng/article/details/77917943

版权

frontEnd 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

1.HTML代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>第三天练习题五</title>
    <script src="js/checkCode.js" charset="utf-8"></script>
    <style type="text/css">
        #container{
            width: 500px;
            height: 500px;
            margin: 40px auto;
            text-align: center;

        }
        #container input{
            margin: 10px;
        }
        .code
        {
            font-family:Arial;
            font-style:italic;
            color:blue;
            font-size:20px;
            border:0;
            /*padding:2px 3px;*/
            letter-spacing:3px;
            font-weight:bolder;
            /*float:left;*/
            cursor:pointer;
            width:100px;
            height:30px;
            line-height:30px;
            text-align:center;
            vertical-align:middle;
            margin-left: 200px;
        }
        a
        {
            text-decoration:none;
            font-size:12px;
            color:#288bc4;
        }
        a:hover
        {
            text-decoration:underline;
        }
    </style>
</head>
<body οnlοad="createCode()">
    <div id="container">
        用户名：<input type="text" id="userName" placeholder="请输入用户名"/> <br/>
        密  码：<input type="text" id="password" placeholder="请输入密码"/> <br/>
        <div class="code" id="checkCode" οnclick="createCode()" ></div><a href="#" οnclick="createCode()">看不清换一张</a>
        <br/>
        验证码：<input  type="text"  id="inputCode" placeholder="请输入验证码"/> <br/>
        <input type="button" id="register" value="注册" οnclick="register();"/>
    </div>
</body>
</html>

2.js验证代码：

var code;
function createCode()
{
    code = "";
    var codeLength = 4; //验证码长度
    var checkCode = document.getElementById("checkCode");
    var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
        'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //验证码范围
    for(var i = 0; i < codeLength; i++)
    {
        var charNum = Math.floor(Math.random() * 52);
        code += codeChars[charNum];
    }
    if(checkCode)
    {
        checkCode.className = "code";
        checkCode.innerHTML = code;
    }
}
function validateCode()
{
    var inputCode=document.getElementById("inputCode").value;
    var flag=1;
    if(inputCode.length <= 0)
    {
         flag=0;//验证码没有输入
    }
    else if(inputCode.toUpperCase() != code.toUpperCase())
    {
        flag=-1;//验证码错误
        createCode();
    }
    else
    {
        flag=1;//输入成功
    }
    return flag;
}
function register(){
    var userName=document.getElementById("userName").value;
    var password=document.getElementById("password").value;
    //if(validateCode()==1){
    //    alert('success');
    //}else if(validateCode()==0){
    //    alert('请输入验证码！');
    //}else{
    //    alert('验证码输入错误！');
    //}
    if(!(userName.length<=20&&userName.length>10)){
        alert('用户账户名不得超过20位，但是不准少于10位');
    }else if(!(password.length<=16&&password.length>6)){
        alert('用户密码不得超过16位，但是不准少于6位');
    }
    else{
        var temp=userName.charCodeAt(0);
        if((temp>=65&&temp<=90)||(temp>=97&&temp<=122)){
            if(userName.indexOf('@qq.com')==userName.lastIndexOf('@qq.com')){
                if(userName.lastIndexOf('m')==userName.length-1){
                    //判断密码含字母
                    var temp= 0,flag=true;
                    for(var i=0;i<password.length;i++){
                        temp=password.charCodeAt(i);
                        if((temp>=65&&temp<=90)||(temp>=97&&temp<=122)){
                            flag=true;
                            break;
                        }else{
                            flag=false;
                        }
                    }
                    if(flag&&validateCode()==1){
                        alert('注册成功！')
                    }else if(validateCode()==0){
                        alert('请输入验证码！');
                    }else if(validateCode()==-1){
                        alert('验证码输入错误！');
                    }else {
                        alert('密码必须含有字母');
                    }

                }else{
                    alert('请正确填写！必须是qq邮箱!');
                }
            }else{
                alert('请正确输入用户名，必须是qq邮箱！');
            }
        }else{
            alert('密码中必须包含字母！');
        }
    }


}

...lemon_...

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
编写注册新用户的模块JavaScript

1.HTML代码：第三天练习题五 #container{ width: 500px; height: 500px; margin: 40px auto; text-align: center; } #con
复制链接

扫一扫

专栏目录