验证表单（正则表达式）

_有光

于 2019-03-08 20:53:09 发布

阅读量476

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/youguang_/article/details/85077549

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: #ccc;
        }
        #dv {
            width: 400px;
            padding: 50px;
            line-height: 40px;
            margin: 100px auto;
            border: 1px solid #999;
            background: #efefef;
        }
        span {
            margin-left: 30px;
            font-size: 12px;
        }
        input {
            margin-left: 10px;
        }
    </style>

</head>
<body>
<div id="dv">
    <lable>Q Q</lable><input type="text" id="qq"><span></span><br>
    <lable>手机</lable><input type="text" id="phone"><span></span><br>
    <lable>邮箱</lable><input type="text" id="email"><span></span><br>
    <lable>座机</lable><input type="text" id="telephone"><span></span><br>
    <lable>姓名</lable><input type="text" id="name"><span></span>
</div>
<script src="H1.js"></script>
        <script>
            checkInput(my$("qq"),/^\d{5,11}$/);
            checkInput(my$("phone"),/^\d{11}$/);
            checkInput(my$("email"),/^[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}$/);
            checkInput(my$("telephone"),/^\d{3,4}[-]\d{7,8}$/);
            checkInput(my$("name"),/^[\u4e00-\u9fa5]{2,6}$/);
            function checkInput(input,reg) {
                input.onblur = function () {
                    if (reg.test(this.value)){
                        this.nextElementSibling.innerText = "正确了";
                        this.nextElementSibling.style.color = "green";
                    } else{
                        this.nextElementSibling.innerText = "错误";
                        this.nextElementSibling.style.color = "red";
                    }
                }
            }

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

实现效果：

_有光

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
验证表单（正则表达式）

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; body { backgro
复制链接

扫一扫

专栏目录