使用正则验证表单-蒲公英云

使用正则验证表单

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

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

<!--
 * @Author: your name
 * @Date: 2021-07-11 10:29:13
 * @LastEditTime: 2021-07-11 15:59:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习\正则表达式.html
-->
<!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>