表达验证（正则版）

最新推荐文章于 2023-02-16 21:21:38 发布

ICY___

最新推荐文章于 2023-02-16 21:21:38 发布

阅读量571

点赞数

分类专栏： ICY___的js进阶文章标签：正则表单验证

本文链接：https://blog.youkuaiyun.com/ICY___/article/details/86654260

版权

js 同时被 2 个专栏收录

35 篇文章

订阅专栏

ICY___的js进阶

14 篇文章

订阅专栏

本文介绍了如何使用正则表达式进行表单验证，强调了正则表达式的易学性和在数据格式校验中的重要性。通过实例代码展示了具体的验证过程，鼓励读者通过实践掌握这一技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用正则表达式表达式，可以充分的实现表单验证的数据格式的正确性验证，且从入门来看，正则表达式比较好学，（往深说就不一定了），下面的案例，将告诉你如何利用正则来实现表单验证。

实现效果：

代码如下：

<!DOCTYPE html>
<html>
<!-- 总体思想：利用最终的验证事件进行一次验证，也就是提交的时候验证各个文本框之
间的数据格式是否正确，
    不正确不提交表单，并提示相应错误，直到能输入对格式，进行提交 -->
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./css/iconfont.css" />
    <!-- 调用字体图标文件的css样式 -->
    <style>
        /* 表单提交的样式 */
        #formuser {
            display: block;
            margin: 0 auto;
            width: 400px;
        }

        .form_user > li {
            list-style: none;
            height: 50px;
            width: 400px;
            border: 1px solid silver;
            border-radius: 5px;
            position: relative;
            margin: 40px 0;
        }

        .form_user > li.litxt > input {
            margin-left: 1px;
            width: 378px;
            height: 48px;
            border-style: none;
            outline: none;
            font-size: 20px;
            color: black;
            padding-left: 20px;

        }

        .tel {
            position: relative;
            border-style: none !important;
        }

        .usertelno {
            width: 150px;
            height: 50px;
            border: 1px solid silver;
            border-radius: 5px;
            line-height: 50px;
            position: relative;
            float: left;
        }

        .usertelno > input {
            position: absolute;
            top: 0;
            left: 1px;
            width: 120px;
            height: 48px;
            padding-left: 20px;
            border-style: none;
            font-size: 20px;
            outline: none;
        }

        #icon {
            position: absolute;
            right: 10px;
            top: 0;
            z-index: 2;
            color: gray;
        }

        .ph {
            float: right;
            width: 210px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid silver;
            font-size: 20px;
            padding-left: 20px;
            outline: none;
        }

        .telnumber {
            display: none;
            position: absolute;
            border-radius: 5px;
            z-index: 9;
            top: 52px;
            width: 398px;
            height: 250px;
            border: 1px solid silver;
            background-color: white;
            overflow-y: scroll;
        }

        .telnumber > ul {
            margin: 0;
            padding: 0;
        }

        .telnumber li {
            list-style: none;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            font-size: 20px;
            color: black;
        }

        .telnumber li:hover {
            background-color: #e4e4e4;
        }

        .btn > input {
            width: 400px;
            height: 50px;
            outline: none;
            border-style: none;
            background-color: transparent;
            color: white;
            font-size: 22px;
        }

        .btn {
            background-color: #2e7fff;
        }

        .btn:hover {
            background-color: #40a6ff;
        }

        .telerror {
            clear: left;
            display: block;
            font-size: 14px;
            color: gray;
            position: relative;
            top: 5px;
        }

        .emailshow {
            display: block;
            font-size: 14px;
            color: gray !important;
            position: absolute;
            top: 53px;
        }

        .error {
            font-size: 14px;
            color: red;
            position: absolute;
            top: 53px;
            left: 0;
            background-image: url("./img/error@2x.png");
            background-repeat: no-repeat;
            background-size: 20px;
            padding-left: 25px;
        }

        .success {
            display: none;
            position: absolute;
            top: 15px;
            right: 10px;
        }
        #telnum{
            border-style: none;
        }
    </style>
</head>

<body>
    <form id="formuser" action="" method="get">
        <!-- 利用get方式进行提交，缺点是不安全，优点是数据量大，且对于某些环境，貌似只能用get提交 -->
        <ul class="form_user">
            <li class="litxt">
                <input type="text" class="userData" name="email" placeholder="邮箱" value="" />
                <span class="emailshow">请输入你常用的邮箱（非qq/foxmail邮箱）</span>
                <img class="success" src="./img/tick.png" alt="" />
                <!-- 为一张对号的图，输入正确时会显示出来，其它时候隐藏 -->
            </li>
            <li class="litxt">
                <input type="text" class="userData" name="nickname" placeholder="昵称" value="" />
                <img class="success" src="./img/tick.png" alt="" />
            </li>
            <li class="litxt">
                <input type="password" class="userData" name="password" placeholder="密码" value="" />
                <img class="success" src="./img/tick.png" alt="" />
            </li>
            <li class="tel">
                <div class="usertelno">
                    <input id="telnum" type="text" value="+86" />
                    <!-- 手机号码前的国际区号，默认为中国 -->
                    <i id="icon" class=" iconfont">&#xf01a6;</i>
                    <!-- 字体图标文件 -->
                </div>
                <input class="ph" placeholder="手机号码" type="text" />

                <div class="telnumber">
                    <ul>
                        <li>中国 +86</li>
                        <li>中国香港特别行政区 +852</li>
                        <li>中国澳门特别行政区 +853</li>
                        <li>中国台湾地区 +886</li>
                        <li>阿尔巴尼亚 +355</li>
                        <li>阿尔及利亚 +213</li>
                        <li>阿富汗 +93</li>
                        <li>阿根廷 +54</li>
                        <li>爱尔兰 +353</li>
                        <li>埃及 +20</li>
                        <li>埃塞俄比亚 +251</li>
                    </ul>
                </div>
                <span class="telerror">可通过该手机号找回密码</span>
            </li>
            <li class="btn"><input type="submit" value="立即注册" /></li>
        </ul>
    </form>
    <script>
        var formuser = document.getElementById('formuser');
        var userData = document.getElementsByClassName('userData');
        var litxt = document.getElementsByClassName('litxt');
        var emailshow = document.getElementsByClassName('emailshow')[0];
        var telnumber=document.getElementsByClassName('telnumber')[0]
        var success = document.getElementsByClassName('success');
        var telnum=document.getElementById('telnum');
        var errorinfo = [{//利用媒体对象来对不同的错误存值
                name: '邮箱',
                error: [{
                        info: '邮箱不能为空！'
                    },
                    {
                        info: '邮箱格式不正确!'
                    }
                ]
            },
            {
                name: '昵称',
                error: [{
                    info: '昵称不能为空!'
                }]
            },
            {
                name: '密码',
                error: [{
                        info: '密码不能为空!'
                    },
                    {
                        info: '密码不能为纯数字或纯字母!'
                    },
                    {
                        info: '密码长度在6~8位之间!'
                    }
                ]
            }
        ]
        formuser.onsubmit = function () {
            // 核心语法
            emailshow.style.display = 'none';
            for (var i = 0; i < userData.length; i++) {
                if (userData[i].value.match(/./) == null) {//判断所有的文本框中的值是否为空
                    addmsg('error', i, 0);//执行报错函数
                } else {//不为空时
                    if (i == 0) {//第一个文本框 邮箱
                        var email_data = /^[A-Za-z\d]+([-_.][a-zA-Z\d]+)*@([a-zA-Z\d]+[.])+[a-zA-Z\d]{2,4}$/;
                        // 利用正则表达式，判断输入邮箱的格式是否正确：即需要有 @ 需要 . 判断后缀是否为三位或四位之类，建议从前到后，利用已知的邮箱来写
                        if (email_data.test(userData[i].value)) {//邮箱判断正确
                            success[i].style.display = 'block';//显示对号
                            addmsg('success', i, null);
                        } else {
                            addmsg('error', i, 1);
                        }
                    }
                    if (i == 1) {//第二个文本框 昵称
                    // 不为空即判断完成
                        success[i].style.display = 'block';//显示对号
                        addmsg('success', i, null);
                    }
                    if (i == 2) {//第三个文本框 密码
                        if (userData[i].value.length >= 6 && userData[i].value.length <= 10) {
                            var password =/^(([a-zA-Z_])+(\d)+([a-zA-Z0-9]*))+|((\d)+([a-zA-Z_])+([a-zA-Z0-9]*))$/;
                            // 利用正则表达式，判断输入密码的格式是否正确：即不能为纯数字，不能为纯字母，可以加下划线
                            if (password.test(userData[i].value)) {
                                success[i].style.display = 'block';//显示对号
                                addmsg('success', i, null);
                            } else {
                                addmsg('error', i, 1)
                            }
                        } else {
                            addmsg('error', i, 2)
                        }
                    }
                }
            }
            // 记录错误的数量长度，如果有错误即长度大于0的话，不提交表单
            var error_length = document.getElementsByClassName('error').length;
            if (error_length) {
                return false;
            }
            return true;
        }

        function addmsg(res, index, num) {
            // 判断报错时的具体行为，提示用户操作
            // 封装方法，res为判断是否为该显示错误值，index 为索引，num为对应错误的参数
            if (litxt[index].lastElementChild.className == 'error') { //如果litxt的最后一个子元素的classname为error，删除当前的span标签
                litxt[index].lastElementChild.remove();
            }
            if (res == 'error') {
                success[index].style.display = 'none';//隐藏对号 
                var span = document.createElement('span');//创建span，error为错误提示
                span.className = 'error';
                span.innerHTML = errorinfo[index].error[num].info;
                litxt[index].appendChild(span);
            }
        }

        telnum.onclick=function(){
            // 点击最后一个文本框时，显示之前的数据
            telnumber.style.display='block';
        }
        telnum.onblur=function(){
            telnumber.style.display='none';
            // 离开时，默认隐藏
        }
        document.onselectstart=function(){
            return false;
        }
        // 禁止用户复制
    </script>
</body>

</html>

表单验证其实不难，相对于图片轮播来说它比较容易理解且方式方法也比较固定，只要多练习，多努力，就一定能掌握，加油，欢迎留言讨论！