使用正则验证表单

短命女 2022-09-09 00:23 194阅读 0赞

大家好，在我们日常生活中，下载软件都会有注册登录，这次先看一个 简单的正则表达式。

<!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>
        <script src="./js/jquery-3.5.1.min.js"></script>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            .span{
                letter-spacing: 2.5rem;
            }
            .span {
                letter-spacing: 2.5rem;
            }
            .opp {
                margin: 0 10px;
            }
            form {
                font-size: 20px;
            }
            input {
                outline: none;
                height: 25px;
                width: 200px;
            }
            button {
                width:150px;
                height: 40px;
                font-size: 17px;
                font-weight: bold;
                margin: 30px 0;
            }
            .div{
                width: 100%;
                text-align: center;
            }
            h2{
                margin: 20px 0px;
            }
        </style>
    </head>
    
    <body>
        <form action="#">
            <div class="div">
                <h2>模拟登陆</h2>
                <span class="span">姓</span>名：<input type="text" id="name"><br><br>
                手<span class="opp">机</span>号：<input type="text" id="phone" maxlength="11"><br><br>
                <span class="span">邮</span>箱：<input type="text" id="e-mail"><br><br>
                出生日期：<input type="text" id="names"><br>
                <button>登录</button>
            </div>
        </form>
        <script>
            $('button').click(function () {
                // 验证姓名
                var ee = $('#name').val()
                var res = /^[\u4e00-\u9fa5]{2,4}$/;
                var btn = res.test(ee);
                if (btn == false) {
                    alert('姓名不符合！')
                }
                // 验证手机号
                var phone = $('#phone').val()
                var one = /^1[3|5|8|9]\d{9}$/;
                var phccc = one.test(phone);
                if (phccc == false) {
                    alert('电话不符合！')
                }
                // 验证邮箱
                var ion = $('#e-mail').val()
                var cun = /^[a-zA-Z0-9_]+@qq.com$/;
                var sum = cun.test(ion);
                if (sum == false) {
                    alert('邮箱不符合！')
                }
                // 验证出生日期
                var xin = $('#names').val()
                var pp = /^(\d{4})-(0?[1-9]|\d{2})-(0?[1-9]|\d{2}|3[0-1])$/;
                var xoo = pp.test(xin);
                if(xoo == false){
                    alert('您的出生年月输入有误哦！')
                }
                // 当你所有的内容都成功之后都等于 true 就说明 能够登录
                if(btn && phccc && sum && xoo == true){
                    // 调用 price() 方法
                    price()
                }
                function price(){
                    alert('恭喜用户登录成功，欢迎您使用！！！')
                }
                
            })
        </script>
    </body>
    
    </html>

效果就是这样的一个效果！

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pel6JC95Lmf5Lya6YCD6LeRfg_size_14_color_FFFFFF_t_70_g_se_x_16][]

就是一个简单的运用的效果。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pel6JC95Lmf5Lya6YCD6LeRfg_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f35da41dbb1749a9874ec20ef9f4f632.png