用户名验证

2021-05-07 18:35:30 作者：互联网

<!DOCTYPE html> <html lang="en">
<head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <script src="../js/common.js"></script> </head>
<body>     <div>         <p>             <label for="">用户名:</label>             <input id="user" type="text">             <span id="user_tips"></span>         </p>         <p>             <label for="">密&emsp;码:</label>             <input id="pwd" type="text">             <span id="pwd_tips"></span>         </p>         <p>             <label for="">确&emsp;认:</label>             <input id="repwd" type="text">             <span id="repwd_tips"></span>         </p>         <p>             <label for="">验证码:</label>             <input id="code" type="text">             <span id="codeSpan">1111</span>             <span id="code_tips"></span>         </p>         <p><input id="btn" type="submit" value="注册"></p>     </div> </body> <script>     // 获取元素点击时验证结果=>span(提示消息)
    // 用户名     // 由数字大小写字母 _ $ 组成 , 6-12位,且不能以数字开头
    // 判断的流程  从易到难的顺序     // a. 长度  6-12位     // b. 不能以数字开头     // c. 由数字大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符报错   => 判断字符串中是否能含有非法字符)

    // 密码     // 由数字大小写字母 _    6-12位
    // 判断密码强度     // 数字,大写,小写,特殊字符  中只出现一种   11111   aaaaaa  AAAAAA   弱     // 数字,大写,小写,特殊字符  中出现2种      中     // 数字,大写,小写,特殊字符  中出现3种      强     // 数字,大写,小写,特殊字符  中出现4种      超强
    // 是否存在数字  / 大写 /小写 / 特殊字符
    // true + true + true + false  => 3
    // 确认密码       // 和密码相同
    // 验证码     // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )       // 2. 点击验证码进行切换     // 3. 验证码输入判断  (输入的  随机生成的  保持一致)
    var userInp = document.getElementById("user");     var userTips = document.getElementById("user_tips");
    var pwdInp = document.getElementById("pwd");     var pwdTips = document.getElementById("pwd_tips");
    var repwdInp = document.getElementById("repwd");     var repwdTips = document.getElementById("repwd_tips");
    var codeInp = document.getElementById("code");     var codeTips = document.getElementById("code_tips");
    var codeSpan = document.getElementById("codeSpan");     var btn = document.getElementById("btn");
    codeSpan.innerText = randCode();     codeSpan.onclick = function () {         codeSpan.innerText = randCode();     }
    btn.onclick = function () {         var user = userInp.value;         var pwd = pwdInp.value;         var repwd = repwdInp.value;         var code = codeInp.value;         console.log(user);         // 1. 8-20 位  length         if (user.length >= 6 && user.length <= 12) {             // 2. 是否以数字开头  验证开头(第一个字符是不是数字)             // var firstChar = user.charAt(0);             // console.log(firstChar);
            // (1)   isNaN(firstChar)   非数字:true  数字:false             // (2)   var numList = ["1","2",..."9"]   非数字: list.indexOf() ==-1               // (3)   var firstCode = user.charCodeAt(0);     数字: 48-57
            var firstCode = user.charCodeAt(0);             console.log(firstCode);
            if (!(firstCode >= 48 && firstCode <= 57)) {                 // userTips.innerText = "√";                 // userTips.style.color = "green";                 // userTips.style.fontSize = "12px";                 // debugger;                 // 3.   由数字,字母(A a),下划线组成  (不允许使用的字符  => 非法字符)  => 每一个字符串都要是合法的  不能有非法字符  => 是否存在非法字符                 var flag = true; // 假设全都是合法的  => 遍历每一个字符找非法                 for (var i = 0; i < user.length; i++) {                     var char = user.charAt(i);                     if (normalList.indexOf(char) == -1) {  // 不在normalList 就是非法字符                         flag = false;  // 存在非法字符                         break;                     }                 }                 if (flag) {                     userTips.innerText = "√";                     userTips.style.color = "green";                     userTips.style.fontSize = "12px";                 } else {                     userTips.innerText = "* 用户名由数字,字母,下划线组成";                     userTips.style.color = "red";                     userTips.style.fontSize = "12px";                 }

            } else {                 userTips.innerText = "* 用户名不能以数字开头";                 userTips.style.color = "red";                 userTips.style.fontSize = "12px";             }
        } else {             userTips.innerText = "* 用户名需要在6-12位之间";             userTips.style.color = "red";             userTips.style.fontSize = "12px";
        }
        // 1. 6-12 位  length         // if (pwd) {  // ""  pwd必须由内容         if (pwd.length >= 6 && pwd.length <= 12) {             var flag = true; // 假设全都是合法的  => 遍历每一个字符找非法             for (var i = 0; i < pwd.length; i++) {                 var char = pwd.charAt(i);                 if (normalList.indexOf(char) == -1) {  // 不在normalList 就是非法字符                     flag = false;  // 存在非法字符                     break;                 }             }             if (flag) {

                var numFlag = false;                 var bigFlag = false;                 var smallFlag = false;                 var speFlag = false;                 for (var char of pwd) {                     if (numList.indexOf(char) != -1) {                         numFlag = true;                     }                     if (bigList.indexOf(char) != -1) {                         bigFlag = true;                     }                     if (smallList.indexOf(char) != -1) {                         smallFlag = true;                     }                     if (speList.indexOf(char) != -1) {                         speFlag = true;                     }                 }
                var sum = numFlag + bigFlag + smallFlag + speFlag;                 console.log(sum);
                var level = "";                 switch (sum) {                     case 1: level = "弱"; break;                     case 2: level = "中"; break;                     case 3: level = "强"; break;                     case 4: level = "超强"; break;                 }
                pwdTips.innerText = "密码强度:" + level;                 pwdTips.style.color = "green";                 pwdTips.style.fontSize = "12px";

            } else {                 pwdTips.innerText = "* 用户名由数字,字母,下划线组成";                 pwdTips.style.color = "red";                 pwdTips.style.fontSize = "12px";             }
        } else {             pwdTips.innerText = "* 用密码需要在6-12位之间";             pwdTips.style.color = "red";             pwdTips.style.fontSize = "12px";         }         // }

        if (pwd && repwd) {  // 1&&2  ""&&2             // 确认密码             if (pwd == repwd) {                 repwdTips.innerText = "√";                 repwdTips.style.color = "green";                 repwdTips.style.fontSize = "12px";             } else {                 repwdTips.innerText = "* 密码不一致";                 repwdTips.style.color = "red";                 repwdTips.style.fontSize = "12px";             }
        } else {             repwdTips.innerText = "* 请输入完整内容";             repwdTips.style.color = "red";             repwdTips.style.fontSize = "12px";         }
        // code         if (code) {             // 统一转小写             if (code.toLowerCase() == codeSpan.innerText.toLowerCase()) {                 codeTips.innerText = "√";                 codeTips.style.color = "green";                 codeTips.style.fontSize = "12px";             } else {                 codeTips.innerText = "* ×";                 codeTips.style.color = "red";                 codeTips.style.fontSize = "12px";             }         } else {             codeTips.innerText = "* 请输入验证码";             codeTips.style.color = "red";             codeTips.style.fontSize = "12px";         }     }

</script>
</html>

标签：style,用户名,12px,验证,color,innerText,var,fontSize
来源： https://www.cnblogs.com/czb1218/p/14742115.html