JavaScript正则表达式判断用户的姓名、电话、邮箱输入

最新推荐文章于 2024-07-17 08:57:48 发布

~，555555

最新推荐文章于 2024-07-17 08:57:48 发布

阅读量1.3k

点赞数 2

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_44717047/article/details/117337258

版权

前端学习专栏收录该内容

84 篇文章 3 订阅

订阅专栏

今天学了正则表达式，下面是一个用正则判断用户输入的小案例，当用户输入错误时显示警告，正确输入警告消失。

在这里插入图片描述

<!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>
    <style>
        .warning{
            color: red;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <p>
            请输入中文姓名：
            <input type="text" id="name">
            <span id="warning1" class="warning">输入的姓名不合法</span>
        </p>
        <p>
            请输入手机号码：
            <input type="text" id="phone">
            <span id="warning2" class="warning">输入的号码不合法</span>

        </p>
        <p>
            请输入邮箱：
            <input type="email" id="email">
            <span id="warning3" class="warning">输入的邮箱不合法</span>

        </p>
    </div>
    <script>
        var nameField=document.getElementById("name");
        var warning1=document.getElementById("warning1");
        var number=document.getElementById("phone");
        var warning2=document.getElementById("warning2");
        var email=document.getElementById("email");
        var warning3=document.getElementById("warning3");

        // 失去焦点的事件监听，开始验证输入是否合法
        nameField.onblur=function(){
            //2~4个汉字的正则表达式
            var reg= /^[\u4E00-\u9FA5]{2,4}$/;
            if(reg.test(nameField.value)){
                warning1.style.display="none"; 
                // 用户更改后警告消失
            }else{
                warning1.style.display="inline"; 
            }
        }
        number.onblur=function(){
            var reg=/^1[3|4|5|7|8|9]\d{8}$/;
            if(reg.test(number.value)){
                warning2.style.display="none";
            }else{
                warning2.style.display="inline";
            }
        }
        email.onblur=function(){
            var reg=/\w+\w+\.[a-zA-Z]{2,4}/;
            if(reg.test(email.value)){
                warning3.style.display="none";
            }else{
                warning3.style.display="inline";
            }
        }
    </script>
</body>
</html>