正则表达表单验证判断qq,邮箱，手机号

最新推荐文章于 2024-06-18 19:54:54 发布

werch

最新推荐文章于 2024-06-18 19:54:54 发布

阅读量332

点赞数

分类专栏： js js 小案例

本文链接：https://blog.csdn.net/weixin_42666092/article/details/116129495

版权

js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

js 小案例

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    QQ号：<input type="text" id="txtQQ"><span></span><br>
    邮箱：<input type="text" id="txtEMail"><span></span><br>
    手机：<input type="text" id="txtPhone"><span></span><br>
    生日：<input type="text" id="txtBirthday"><span></span><br>
    姓名：<input type="text" id="txtName"><span></span><br>


    <script>
        //获取文本框
        var txtQQ = document.getElementById("txtQQ");
        var txtEMail = document.getElementById("txtEMail");
        var txtPhone = document.getElementById("txtPhone");
        var txtBirthday = document.getElementById("txtBirthday");
        var txtName = document.getElementById("txtName");

        //正则表达式
        var regQQ = /^\d{5,12}$/;
        var regMail = /^\w+@\w+\.\w+(\.\w+)?$/;
        var regPhone = /^\d{11}$/;
        var regBirthday = /^\d{4}-\d{1,2}-\d{1,2}$/;
        var regName = /^[\u4e00-\u9fa5]{2,4}$/;
        //添加验证
        addCheck(txtBirthday, regBirthday, "请输入正确的出生日期");
        addCheck(txtEMail, regMail, "请输入正确的邮箱地址");
        addCheck(txtPhone, regPhone, "请输入正确的手机号码");
        addCheck(txtName, regName, "请输入正确的姓名");
        addCheck(txtQQ, regQQ, "请输入正确的QQ");



        //给文本框添加验证
        function addCheck(element, reg, tip) {
            element.onblur = function () {
                //获取当前文本框对应的span
                var span = this.nextElementSibling;
                //判断验证是否成功
                if(!reg.test(this.value) ){
                    //验证不成功
                    span.innerText = tip;
                    span.style.color = "red";
                }else{
                    //验证成功
                    span.innerText = "";
                    span.style.color = "";
                }
            };
        }


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

werch

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
正则表达表单验证判断qq,邮箱，手机号

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> QQ号：<input type="text" id="txtQQ"><span></span><br> 邮箱：<input typ
复制链接

扫一扫

专栏目录