js表单验证（常用的正则表达式）

最新推荐文章于 2024-05-12 06:38:06 发布

miss-ddly

最新推荐文章于 2024-05-12 06:38:06 发布

阅读量1.4k

点赞数 3

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_69759037/article/details/127955660

版权

js表单验证的正则表达式，test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

语法：let reg=/正则表达式主体/修饰符(可选);

方括号用于查找某个范围内的字符:

[1-10]查找任何从 1 至 10 的数字，[a-z]查找方括号之间的任何字符

元字符是拥有特殊含义的字符

\d：查找数字。\s：查找空白字符

<!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>
    <style>
        .box {
            width: 300px;
            margin: 0 auto;
        }

        .box>input {
            width: 160px;
            height: 30px;
            border: 1px solid rgb(110, 109, 108);
            margin-top: 10px;
            outline: none;
        }
    </style>
    <style>

    </style>
</head>

<body>
    <div class="box">
        <input type="text" name="" id="" class="uname" placeholder="用户名">
        <input type="password" name="" id="" class="pwd" placeholder="密码">
        <input type="email" name="" id="" class="email" placeholder="邮箱">
        <input type="phone" name="" id="" class="phone" placeholder="手机号">
        <div>
            <input type="radio" name="" id="">男
            <input type="radio" name="" id="">女
        </div>
        <button>点击</button>
    </div>
    <script>
        let uname = document.querySelector('.uname');
        let pwd = document.querySelector('.pwd');
        let email = document.querySelector('.email');
        let phone = document.querySelector('.phone');
        let button = document.querySelector('button');

        button.addEventListener('click', function () {

            /*校验是否全由8位数字组成 */
            let reg = /^[0-9]{8}$/;
            if (reg.test(uname.value.trim()) == false) {
                uname.style.border = '1px solid red'
            }
            /*校验是否中文名称组成 */
            let reg1 = /^[\u4E00-\u9FA5]{2,4}$/;
            if (reg1.test(pwd.value.trim()) == false) {
                pwd.style.border = '1px solid red'
            }
            /*校验邮件地址是否合法 */
            let reg2 = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
            if (reg2.test(email.value.trim()) == false) {
                email.style.border = '1px solid red'
            }
            /*校验手机号*/
            let reg3 = /^^1[0-9]{10}$$/;
            if (reg3.test(phone.value.trim()) == false) {
                phone.style.border = '1px solid red'
            }
        })

    </script>
</body>

</html>