demo1表单验证

javascript 专栏收录该内容
3 篇文章 0 订阅

学了两周的js,做了一个表单验证的demo…

HTML样式:
在这里插入图片描述
用户名要求:1-6位英数命名,不以数字开头,不能包含非法符号;

密码要求:6-12位数字、字母组合;单一数字,小写字母,或大写字母,提示密码强度为弱;数字+小写字母、数字+大写字母或小写字母+大写字母,提示密码强度为中;数字、小写字母、大写字母全都包含,提示密码强度为强,不能包含非法符号;

确认密码要求:两次密码输出一致,否则提示密码输出错误

验证码要求:验证码由大小写字母及数字组成,页面一加载就显示验证码,用户输入的验证码不区分大小写,输入错误自动刷新一个新的验证码。

全部输入完毕,点击注册按钮,若格式全部正确,页面提示“注册成功”,若格式错误则输出“请注意红色提示!”

下面开始代码部分…

html css部分大概写了一下,没有过多的修饰…

<body>
    用户名:<input id="username" placeholder="1-6位英数命名,不以数字开头"><span id="username_tip"></span><br /> 
    密码:<input id="userpwd" placeholder="6-12位数字、字母组合"> <span id="userpwd1_tip"></span><br /> 
    确认密码: <input id="userpwd2"> <span id="userpwd2_tip"></span> <br /> 
    验证码:<input id="usercode"> <span id="showcode"></span> <span id="usercode_tip"></span><br />
    <button id="btn">注册</button>
</body>

添加了一个.js文件

var bigList = [];
var lowerList = [];
var numberList = [];
var otherList = ["$", "_"];//字符数组,可自主添加
for (var i = 65; i < 65 + 26; i++) {//A  65  +26获取大写字母A-Z
    var bigcode = String.fromCharCode(i);
    bigList.push(bigcode);//放入大写字母数组
}
for (var i = 97; i < 97 + 26; i++) {//a  97 +26获取小写字母a-z
    var lowerCode = String.fromCharCode(i);
    lowerList.push(lowerCode);//放入小写字母数组
}
for (var i = 0; i <= 9; i++) {
    numberList.push(i + "");//获取数字数组
}
var list = bigList.concat(lowerList, numberList, otherList);//大小写字母数字加符号组合
var list1 = bigList.concat(lowerList, numberList);//大小写字母加数字组合

下面开始写 用户名 部分(以下部分皆是用了函数封装)

//用户名
var usernameInput = document.getElementById("username");
var usernameSpan = document.getElementById("username_tip");
//将用户名部分封装成一个函数
function checkUsername(){
// 用户名部分
    var username = usernameInput.value; //获取用户名
    if (username.length >= 1 && username.length <= 6) { //长度合法
        var firstCode = username.charAt(0); //取出用户输入名字的第一位,赋值给firstCode
        if (numberList.indexOf(firstCode) != -1) {//假设firstCode在数字数组里面;
            usernameSpan.innerHTML = "不能以数字开头";
            usernameSpan.style.color = "red";
        } else {
            var flag = true; //默认用户输入名字合法;
            for (var j = 0; j < username.length; j++) {
            	var char = username.charAt(j); // 取出用户输入名字的每一位,赋值给firstCode
           	if (list.indexOf(char) == -1) {//表示用户名中有字符没有包含在list里面,存在非法字符;
                    flag = false;
               	    break;
                }
             }
             if (flag) {
                 usernameSpan.innerHTML = "√";
                 usernameSpan.style.color = "green";
                 return true;//最后用来提示注册成功
             } else {
                 usernameSpan.innerHTML = "用户名包含非法字符";
                 usernameSpan.style.color = "red";
                 return false;//最后用来提示注册未成功
                }
            }
        } else { //长度不合法
            usernameSpan.innerHTML = "长度不合法";
            usernameSpan.style.color = "red";
            return false;//最后用来提示注册未成功
        }
    }

满足条件时显示:
成功时显示
不满足条件时显示
在这里插入图片描述
接着是 密码 部分

判断密码是否合法部分是很好思考的,但是在判断密码强度的时候,我最开始想用if语句,获取用户输入密码的每一个字符,判断是否存在在list数组里…结果事实证明我的想法是错误的,后来想到可以用统计的方法…

 //密码
    var userpwdInput = document.getElementById("userpwd");
    var userpwd2Input = document.getElementById("userpwd2");
    var userpwdSpan = document.getElementById("userpwd1_tip");
    var userpwd2Span = document.getElementById("userpwd2_tip");
 //将用户密码部分封装成一个函数
    function checkUserpwd(){
     //密码部分
        var userpwd = userpwdInput.value;
        var userpwd2 = userpwd2Input.value;
        // 首次输入密码
        if (userpwd.length >= 6 && userpwd.length <= 12) {
            //此处长度合法;
            var flag1 = true; //看里面是否有非法字符,默认合法
             for (var i = 0; i < userpwd.length; i++) {
                var item = userpwd.charAt(i); //将userpwd里面的值赋给item;
                if (list1.indexOf(item) == -1) {
                    //表示输入的密码里存在非法字符;
                    flag1 = false;
                    break;
                }
            }
            if (flag1) {
                 //密码合法以后判断密码强度
                var bigCode = 0; //假设密码中不包含大写字母
                var lowerCode = 0; //假设密码中不包含小写字母
                var numberCode = 0; //假设密码中不包含数字;
                 for (var i = 0; i < userpwd.length; i++) {//若包含大写字母bigCode+1
                    var num = userpwd.charAt(i);
                    if (bigList.indexOf(num) != -1) {
                        bigCode = 1;
                    }
                    if (lowerList.indexOf(num) != -1) {
                        lowerCode = 1;
                    }
                    if (numberList.indexOf(num) != -1) {
                        numberCode = 1;
                    }
                }
                 switch (bigCode + lowerCode + numberCode) {
                    case 1: //若相加和为1,密码强度为弱
                        userpwdSpan.innerHTML = "密码强度:弱";
                        userpwdSpan.style.color = "#99CCCC";
                        break;
                    case 2: //若相加和为2,密码强度为中
                        userpwdSpan.innerHTML = "密码强度:中";
                        userpwdSpan.style.color = "#0099CC";
                        break;
                    case 3: //若相加和为3,密码强度为强
                        userpwdSpan.innerHTML = "密码强度:强";
                        userpwdSpan.style.color = "#006699";
                        break;
                }
            } else {
                userpwdSpan.innerHTML = "用户名包含非法字符";
                userpwdSpan.style.color = "red";
                return false;//最后用来提示注册未成功
            }
        } else {
            userpwdSpan.innerHTML = "密码长度不合法";
            userpwdSpan.style.color = "red";
            return false;//最后用来提示注册未成功
        }

当再次输入密码的时候只需要判断密码是否与前面一致(下面代码与上面是同一部分)

//再次输入密码 
if (userpwd2.length >= 6 && userpwd2.length <= 12) {
    for (var k = 0; k < userpwd2.length; k++) {
        var index = userpwd2.charAt(k); //将userpwd2中的每一位赋值给index;
        for (var n = 0; n < userpwd2.length; n++) {
             if (userpwd.charAt(n) == userpwd2.charAt(n)) {
                 userpwd2Span.innerHTML = "√";
                 userpwd2Span.style.color = "green";
                 return true;//最后用来提示注册成功
             } else {
                 userpwd2Span.innerHTML = "两次输入不一致";
                 userpwd2Span.style.color = "red";
                 return false;//最后用来提示注册未成功
                 }
             }
         }
     } else {
            userpwd2Span.innerHTML = "两次输入不一致";
            userpwd2Span.style.color = "red";
            return false;//最后用来提示注册未成功
       }
}

最后是 验证码 部分
验证码要求由大小写字母及数字组成,页面一加载就显示验证码,用户输入的验证码不区分大小写,输入错误自动刷新一个新的验证码。

//验证码
 var usercodeInput = document.getElementById("usercode");//用户输入验证码
 var showcodeSpan = document.getElementById("showcode");//显示验证码
 var usercodeSpan = document.getElementById("usercode_tip"); //提示错误信息
  
 showcodeSpan.innerHTML = getRandCodeFromList(list1, 4);//页面一加载出来就显示验证码
 
 //将用户名部分封装成一个函数
 showcodeSpan.onclick =  function(){
 showcodeSpan.innerHTML = getRandCodeFromList(list1, 4);//输入错误后再次点击刷新
    }
function checkUsercode(){
       var usercode = usercodeInput.value;//点击之后就取值
       if (usercode.toUpperCase() == (showcodeSpan.innerHTML).toUpperCase()) { //两边英文字母全部转换成大写,比较相等
            usercodeSpan.innerHTML = "√";
            usercodeSpan.style.color = "green";
            return true;//最后用来提示注册成功
       } else {
            usercodeSpan.innerHTML="验证码错误";
            usercodeSpan.style.color = "red";
            return false;//最后用来提示注册未成功
            showcodeSpan.innerHTML = getRandCodeFromList(list1, 4);//刷新一次 再重新输入新的验证码
        }
    }
     //封装一个获取验证码的函数
    function getRandCodeFromList(list,length){
        var str = "";
        for(var i = 0;i < length ; i++){
             var maxIndex = list.length - 1;//找到最大的一个下标赋值给maxIndex(代表验证码有多少个num)
            var randIndex = Math.round(Math.random() * maxIndex);//随机生成的下标
            var num = list[randIndex];
            str += num;
         }
        return str;
    }

注册按钮点击后的效果

 var btn = document.getElementById("btn");
 btn.onclick = function() {
     var judge1 = checkUsername();
     var judge2 = checkUserpwd();
     var judge3 = checkUsercode();
     if(judge1 && judge2 && judge3){
            alert("注册成功");
     }else{
            alert("请注意红色错误!");
     }
}

最终显示结果
在这里插入图片描述
在这里插入图片描述
最终一个简单表单验证demo就完成了…具体的步骤怎么完成代码的,都写在代码的注释里了…学了好久函数封装,这个damo做完以后就了解的差不多了…

在此告诫大家 年轻人写代码一定要谦虚,写一步看一步,不然就悲催了…

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值