js利用正则表达式实现简单版表单验证

爬楼梯的小新

已于 2022-01-19 17:00:11 修改

阅读量163

点赞数

分类专栏： JavaScript 文章标签： javascript 正则表达式前端

于 2022-01-19 16:59:17 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/122584953

版权

JavaScript 专栏收录该内容

86 篇文章 4 订阅

订阅专栏

我把三张图截到一起实际是一个表单根据返回的结果是否符号条件正确或者错误则改变span的类名

/^[a-zA-Z0-9_-]{6,12}$/;

这个意思是可以重复输入大小写字母 0-9数字之间的6-12位字符下划线横线其他字符出现则报错

<!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>正则</title>
    <style>
        span {
            color: #ccc;
        }
        input {
            outline: none;
        }
        .right {
            color: green;
        }
        .wrong {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" class="uname">
    <span>请输入用户名</span>
</body>
<script>
    var uname = document.querySelector('.uname');
    var span = document.querySelector('span')
    var reg = /^[a-zA-Z0-9_-]{6,12}$/;
    uname.onblur = function() {
        //reg.test() 里面放上值 可以返回true还是fasle
        if (reg.test(uname.value)) {
            console.log('正确');
            span.className = 'right'
            span.innerHTML = '用户名格式正确'
        } else {
            console.log('错误');
            span.className = 'wrong'
            span.innerHTML = '用户名格式错误'
        }
    }
</script>

</html>