JavaScript登录注册账户名密码邮箱等用正则表达式校验。

最新推荐文章于 2024-04-17 09:51:42 发布

. L

最新推荐文章于 2024-04-17 09:51:42 发布

阅读量1.2k

点赞数 2

分类专栏：前端 JavaScript 正则表达式

本文链接：https://blog.csdn.net/weixin_44286172/article/details/107805502

版权

JavaScript 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

正则表达式

1 篇文章 0 订阅

订阅专栏

前端

0 篇文章 0 订阅

订阅专栏

JavaScript登录注册账户名密码邮箱等用正则表达式校验。

直接上代码如果有解释不对的地方，或者错误的地方，请留言。其中正则表达式具体的根据自己的需求更换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    因为校验的基本流程一样  所以抽取一个函数来专门校验输入的对错。
    function check(username,regex,spanId,sucessInfo,errorInfo) {
        定义一个flag变量用来记录校验结果是true还是false
        var flag;
        获取要校验的标签里输入的值
        var val = document.getElementsByName(username)[0].value;
        获取要操作span标签 用来写入返回给正确和错误信息。
        var span = document.getElementById(spanId);
        判断页面标签内输入的内容是否符合正则的规则，如果符合，返回true 反之返回false。
        用flag记录  返回flag 作为函数的返回值。
        if (regex.test(val)) {
            正确的时候
            span.innerHTML = sucessInfo.fontcolor("red");
            flag = true;
        } else {
            错误的时候
            span.innerHTML = errorInfo.fontcolor("red");
            flag = false;
        }
        return flag;
    }
    定义一个失去焦点的函数user去校验账号是否符合规则。
    function user() {
        var regex = /^\w+@\w+(\.\w+)+$/i;
        返回一个正确为true 或者错误为false的返回值
        return check("username",regex,"userspan","用户名正确","用户名错误");
    }
    function pass() {
        var regex =/^[\d*\w*@_-]{5,12}$/;
        返回一个正确为true 或者错误为false的返回值
        return check("psw",regex,"pswspan","密码正确","密码错误");
    }
    接着就是随意扩展   添加组件去改变正则表达式和给check函数的传值即可

    定义一个form表单的onsubmit函数。返回true或false
     因为onsubmit的返回值如果是true 则会提交表单 否则不提交
    function chekform() {
        当两个函数返回值都是true时  chekform函数返回true  反之为false。
        if(user() && pass()){
            return true;
        }else {
            return false;
        }
    }
</script>
<form onsubmit="return chekform()">
    邮箱账号: <input type="text" name="username" placeholder="账号为数字或字母下划线组成"  onblur="user()">
    <span id="userspan"></span>
    <br>

    密码: <input type="password" name="psw" placeholder="密码为6-12为数字字母符号组成" onblur="pass()">
    <span id="pswspan"></span>
    <br>
    <!--可以在密码下面添加很多组件去校验-->
    <input type="submit" value="提交账户密码">
</form>
</body>
</html>

. L

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript登录注册账户名密码邮箱等用正则表达式校验。

JavaScript登录注册账户名密码邮箱等用正则表达式校验。直接上代码如果有解释不对的地方，或者错误的地方，请留言。其中正则表达式具体的根据自己的需求更换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script type="te
复制链接

扫一扫