JS正则表达式以及输入校验

最新推荐文章于 2024-07-03 19:55:00 发布

Hercule2016

最新推荐文章于 2024-07-03 19:55:00 发布

阅读量423

点赞数

分类专栏： JS 文章标签： js javascript

本文链接：https://blog.csdn.net/cdut2016/article/details/106826123

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

关于正则表达式的一些细枝末节还有一些代码的详细内容和意义来说，我建议大家可以去w3school去看看。但是记住正则表达式是与语言无关的。我这里仅仅给出一个实例来帮大家参考。

下面这一段代码主要功能是判断账号的格式，我会在下面打上详细的注释

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <span>账号</span><input type="text" name="username" onblur="checkUsername(this)" > <span id="username"></span> <br>
    <span>密码</span><input type="password" name="password"> <span id="password"></span> <br>
    <span>邮箱</span><input type="text" name="email"> <span id="email"></span> <br>
    <input type="submit" value="注册">
</form>

<script>
    function checkUsername(obj) {
       //正则表达式的内容是以数字开头并且中间都是数字，并且以数字结尾
        var patt = /^\d\d{4,16}\d$/;
        alert(patt.test(obj.value));
    }
    var inputs = document.querySelectorAll("input");//得到所有的input输入框
    for(var i = 0;i<inputs.length;i++){
        var input = inputs[i];
        // input.onblur = function () {
        //     // 判断一下判断的是什么
        // }
    }
</script>

</body>
</html>

这里可以验证一下输入结果：
可以看到这里六位数字的账号验证正确
在这里插入图片描述
如果不正确比如输入5位数字
这里就会显示false

下面给出正则表达式项目的完整代码：这里我就不运行了，总之以后项目中有用户输入的地方度应该加输入验证，而且这里的邮箱格式并不是很严谨真正的邮箱验证的正则表达式是比较复杂的。大家可以去百度一下看看相关这方面的博客因为我这里只是为了实现功能，所以就不那么计较了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
</head>
<body>
<form action="">
    <span>账号</span><input type="text" name="username" > <span id="username"></span> <br>
    <span>密码</span><input type="password" name="password"> <span id="password"></span> <br>
    <span>邮箱</span><input type="text" name="email"> <span id="email"></span> <br>
    <input type="submit" value="注册">
</form>

<script>
    function checkUsername(obj){
        var patt = /^[a-zA-Z][a-zA-Z0-9_]{5,17}/
        var span = document.getElementById("username");
        span.style.fontSize = "30px";
        span.style.fontWeight = "900";
        if(patt.test(obj.value)){
            span.style.color = "green";
            span.innerText = "√";
        }else{
            span.style.color = "red";
            span.innerText = "×";
        }
    }

    function checkPassword(obj){
        var patt = /^[a-zA-Z][a-zA-Z0-9_]{5,17}/
        var span = document.getElementById("password");
        span.style.fontSize = "30px";
        span.style.fontWeight = "900";
        if(patt.test(obj.value)){
            span.style.color = "green";
            span.innerText = "√";
        }else{
            span.style.color = "red";
            span.innerText = "×";
        }
    }

    function checkEmail(obj){
        var patt = /[a-zA-Z0-9_]{1,}@[a-zA-Z0-9_]{1,}\.[a-zA-Z]{1,}/
        var span = document.getElementById("email");
        span.style.fontSize = "30px";
        span.style.fontWeight = "900";
        if(patt.test(obj.value)){
            span.style.color = "green";
            span.innerText = "√";
        }else{
            span.style.color = "red";
            span.innerText = "×";
        }
    }
    var inputs = document.querySelectorAll("input");
    for(var i = 0;i<inputs.length;i++){
        var input = inputs[i];
        input.onblur = function (){
            //判断一下判断的是什么
            var o = this;
            if(o.name == "username"){
                checkUsername(o);
            }else if(o.name == "password"){
                checkPassword(o);
            }else if(o.name == "email"){
                checkEmail(o);
            }
        }
    }

</script>
</body>
</html>

Hercule2016

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS正则表达式以及输入校验

关于正则表达式的一些细枝末节还有一些代码的详细内容和意义来说，我建议大家可以去w3school去看看。但是记住正则表达式是与语言无关的。我这里仅仅给出一个实例来帮大家参考。下面这一段代码主要功能是判断账号的格式，我会在下面打上详细的注释!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&gt
复制链接

扫一扫

专栏目录