2022-05-14 正则练习(综合表单验证):对登录页面进行格式检测

原创已于 2022-05-16 09:12:58 修改 · 384 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #正则表达式 #登录界面 #表单

于 2022-05-14 19:47:21 首次发布

项目与应用专栏收录该内容

67 篇文章

订阅专栏

要求

1.用户名用户名仅支持中文、字母、数字、“-”“”的组合，4-20个字符
2.密码的规则数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强
3.重复密码跟第一次输入密码一致
4.手机号的验证第一位必须为1，后面再加10位数字
5.邮箱数字大小写字母- 3到12位 @ 数字字母 2到9位 . 字母2到5位
6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳

步骤

1.1.获取节点
1.2.设置初始变量x,y,z,默认值为false
2.给user绑定失去焦点事件
  获取user文本内容
  给user制定正则表达式
  若正则表达式.test(文本内容)结果为真,给span输出"用户名合格",x=true,
  结果为假时类推
3.给pass绑定失去焦点事件
  获取pass文本内容
  若 密码长度不在6-20之间,则输出:密码长度不正确,y=false
  否则 验证密码强弱等级 y=true
  初始化变量a,b,c分别为数字,字母,特殊符号的正则结果(1或0);
  switch 三个变量的和,
  若为1,说明只有一种种类的符号,输出"弱";
  为2,输出"中";为3,输出"强"
4.给pass2绑定失去焦点事件
  获取pass2文本内容,获取获取pass文本内容
  若pass2文本内容不为空且等于pass文本内容,则输出:两次密码一致,z=true,为假时类推
5.给btn绑定鼠标点击事件
  若x,y,z都为真则弹出"提交成功",否则"提交失败"

完整代码

<!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>
</head>

<body>
    <form action="">
        用户名:<input type="text" id="user"><span></span><br>邮箱:
        <input type="text" id="mail"><span></span><br> 密 码:<input type="text" id="pass"><span></span><br> 确认密码:
        <input type="text" id="pass2"><span></span><br>
        <input type="button" value="提交" id="btn">
    </form>
</body>
<script>
    //1.用户名:仅支持中文、字母、数字、“-”“_”的组合，4-20个字符
    //2.密码:数字字母特殊字符，一种类型，弱。两种类型为中，三种类型为强,6-20个字符
    //3.重复密码 跟第一次输入 密码一致
    //4.手机号的验证第一位必须为1，后面再加10位数字
    //5.邮箱 数字大小写字母_- 3到12位   @  数字字母 2到9位  . 字母2到5位
    //6.提交按钮的时候，判断所有输入数据是否符合。符合跳转，否，不跳
    /*
步骤:
1.1.获取节点
1.2.设置初始变量x,y,z,默认值为false
2.给user绑定失去焦点事件
  获取user文本内容
  给user制定正则表达式
  若正则表达式.test(文本内容)结果为真,给span输出"用户名合格",x=true,
  结果为假时类推
3.给pass绑定失去焦点事件
  获取pass文本内容
  若 密码长度不在6-20之间,则输出:密码长度不正确,y=false
  否则 验证密码强弱等级 y=true
  初始化变量a,b,c分别为数字,字母,特殊符号的正则结果(1或0);
  switch 三个变量的和,
  若为1,说明只有一种种类的符号,输出"弱";
  为2,输出"中";为3,输出"强"
4.给pass2绑定失去焦点事件
  获取pass2文本内容,获取获取pass文本内容
  若pass2文本内容不为空且等于pass文本内容,则输出:两次密码一致,z=true,为假时类推
5.给btn绑定鼠标点击事件
  若x,y,z都为真则弹出"提交成功",否则"提交失败"

  */

var mail = document.getElementById("mail");
var user = document.getElementById("user");
var pass = document.getElementById("pass");
var pass2 = document.getElementById("pass2");
var btn = document.getElementById("btn");
var t = false,
    x = false,
    y = false,
    z = false;
user.onblur = function() {
    var val = this.value;
    var reg = /^[\w\-\u4E00-\u9FA5]{4,20}$/;//"\w"和"-"和汉字
    if (reg.test(val)) {
        this.nextElementSibling.innerHTML = "*用户名合法";
        this.nextElementSibling.style.color = 'green';
        x = true;
    } else {
        this.nextElementSibling.innerHTML = "*用户名非法"
        this.nextElementSibling.style.color = "red";
        x = false;
    }
};
mail.onblur = function() {
    var val = this.value;
    var reg = /^\w{3,12}@[a-zA-Z\d]{2,9}\.(com|cn|net)$/;
    if (reg.test(val)) {
        this.nextElementSibling.innerHTML = '邮箱格式正确';
        t = true;
    } else {
        this.nextElementSibling.innerHTML = '邮箱格式错误';
        t = false;
    }
};
pass.onblur = function() {
    var val = this.value;
    if (val.length >= 6 && val.length <= 20) {
        var regShuzi = /\d+/,
            regZimu = /[a-zA-Z]+/,
            regTeshu = /[^a-zA-Z0-9]+/;
        var a = regShuzi.test(val) ? 1 : 0,
            b = regZimu.test(val) ? 1 : 0,
            c = regTeshu.test(val) ? 1 : 0;
        var str = '';
        switch (a + b + c) {
            case 1:
                str = '弱';
                break;
            case 2:
                str = '中';
                break;
            case 3:
                str = '强';
                break;
        }
        this.nextElementSibling.innerHTML = str;
        y = true;
    } else {
        this.nextElementSibling.innerHTML = "密码长度不符";
        y = false;
    }
};
pass2.onblur = function() {
    var pass2_val = this.value;
    var pass_val = pass.value;
    if (pass2_val == pass_val) {
        this.nextElementSibling.innerHTML = "一致";
        z = true;
    } else {
        this.nextElementSibling.innerHTML = "不一致";
        z = false;
    }
};
btn.onclick = function() {
    if (t && x && y && z) {
        alert("提交成功!");
    } else {
        alert("提交失败!");
    }
};
</script>

</html>

重点代码

var mail = document.getElementById("mail");
var user = document.getElementById("user");
var pass = document.getElementById("pass");
var pass2 = document.getElementById("pass2");
var btn = document.getElementById("btn");
var t = false,
    x = false,
    y = false,
    z = false;
user.onblur = function() {
    var val = this.value;
    var reg = /^[\w\-\u4E00-\u9FA5]{4,20}$/;
    if (reg.test(val)) {
        this.nextElementSibling.innerHTML = "*用户名合法";
        this.nextElementSibling.style.color = 'green';
        x = true;
    } else {
        this.nextElementSibling.innerHTML = "*用户名非法"
        this.nextElementSibling.style.color = "red";
        x = false;
    }
};
mail.onblur = function() {
    var val = this.value;
    var reg = /^\w{3,12}@[a-zA-Z\d]{2,9}\.(com|cn|net)$/;
    if (reg.test(val)) {
        this.nextElementSibling.innerHTML = '邮箱格式正确';
        t = true;
    } else {
        this.nextElementSibling.innerHTML = '邮箱格式错误';
        t = false;
    }
};
pass.onblur = function() {
    var val = this.value;
    if (val.length >= 6 && val.length <= 20) {
        var regShuzi = /\d+/,
            regZimu = /[a-zA-Z]+/,
            regTeshu = /[^a-zA-Z0-9]+/;
        var a = regShuzi.test(val) ? 1 : 0,
            b = regZimu.test(val) ? 1 : 0,
            c = regTeshu.test(val) ? 1 : 0;
        var str = '';
        switch (a + b + c) {
            case 1:
                str = '弱';
                break;
            case 2:
                str = '中';
                break;
            case 3:
                str = '强';
                break;
        }
        this.nextElementSibling.innerHTML = str;
        y = true;
    } else {
        this.nextElementSibling.innerHTML = "密码长度不符";
        y = false;
    }
};
pass2.onblur = function() {
    var pass2_val = this.value;
    var pass_val = pass.value;
    if (pass2_val == pass_val) {
        this.nextElementSibling.innerHTML = "一致";
        z = true;
    } else {
        this.nextElementSibling.innerHTML = "不一致";
        z = false;
    }
};
btn.onclick = function() {
    if (t && x && y && z) {
        alert("提交成功!");
    } else {
        alert("提交失败!");
    }
};