2021-06-30 给登录框设置正则条件

最新推荐文章于 2023-07-04 16:09:17 发布

原创最新推荐文章于 2023-07-04 16:09:17 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#正则表达式 #登录注册 #js #javascript

js 专栏收录该内容

37 篇文章

订阅专栏

本文介绍如何利用JavaScript实现登录框的正则验证，当输入符合正则条件时显示正确信息，否则提示错误。

思路

若正则test条件为true则显示正确语句,否则显示出错误语句

代码

html

用户名:<input type="text" placeholder="用户名/邮箱/QQ号/手机号">
<span></span>
<br> 密&nbsp;&nbsp;码:
<input type="password">
<span></span>
<br> 确认密码:
<input type="password">
<span></span>
<br>
<button>登录</button>

js:

var input = document.querySelectorAll("input");
var span = document.querySelectorAll("span");
input[0].onblur = function() {
    var str = input[0].value;
    //账号由5~12个数字、字母下划线组成,首字母不能是数字
    var reg = /^[a-z_]{1}\w{4,11}$/i;
    if (reg.test(str)) {
        span[0].style.color = "green";
        span[0].innerHTML = "*用户名格式正确!";
    } else {
        span[0].style.color = "red";
        span[0].innerHTML = "*用户名格式错误!";
    }
}
input[2].onblur = function() {
    var str1 = input[1].value;
    var str2 = input[2].value;
    if (str1 == str2) {
        span[2].style.color = "green";
        span[2].innerHTML = "*两次输入的密码一致!";
    } else {
        span[2].style.color = "red";
        span[2].innerHTML = "*两次输入的密码不一致!";
    }
}