正则表达式应用

最新推荐文章于 2024-01-18 15:10:03 发布

greedy-hat

最新推荐文章于 2024-01-18 15:10:03 发布

阅读量115

点赞数

分类专栏： Java后端

本文链接：https://blog.csdn.net/qq_41638851/article/details/113588119

版权

Java后端专栏收录该内容

36 篇文章 3 订阅

订阅专栏

正则快速入门

中文：/[\u4e00-\u9fa5]/

var pattern = /[\u4e00-\u9fa5]/,
	str = '';
console.log(pattern.test(str));

性别：/^男$|^女$/

var pattern = /^男$|^女$/,
	str = '';
console.log(pattern.test(str));

电话：/^\d{11}$/ 或/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/

var pattern = /^\d{11}$/,
	str = '';
console.log(pattern.test(str));

var pattern = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/,
	str = '';
console.log(pattern.test(str));

邮箱：/^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/

var pattern = /^\w{3,12}@\w{1,5}\.[a-z]{2,3}$/,
	str = '';
console.log(pattern.test(str));

example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>

<body>
    <h1>正则表达式表单验证</h1>

    <form action="" onsubmit="return false">
        <p>
            <label for="name">姓名：</label>
            <input type="text" id="name" onblur="nameCheck()">
            <span class="name"></span>
        </p>
        <p>
            <label for="sex">性别：</label>
            <input type="text" id="sex" onblur="sexCheck()">
            <span class="sex"></span>
        </p>
        <p>
            <label for="tel">电话：</label>
            <input type="text" id="tel" onblur="telCheck()">
            <span id="tel"></span>
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" onblur="emailCheck()">
            <span class="email"></span>
        </p>
        <p>
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" onblur="pwdCheck()">
            <span class="pwd"></span>
        </p>
        <p>
            <label for="pwd1">密码确认：</label>
            <input type="password" id="pwd1" onblur="pwdSure()">
            <span class="pwd1"></span>
        </p>
        <p class="submit">
            <input type="button" onclick="submit()" id="submit" value="提交">
        </p>
    </form>



    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script>
        function submit() {
            //如果全部输入正确返回成功  输入错误则输出提示
            if (nameCheck() && sexCheck() && telCheck() && emailCheck() && pwdCheck() && pwdSure()) {
                alert('提交成功');
            } else {
                alert('你的输入有误，请按要求输入后再提交');
            }
        }
        //验证姓名字段
        function nameCheck() {
            let reg = /^[\u4e00-\u9fa5]{2,6}$/;
            let name = $("#name").val();
            if (!reg.test(name) || name == '') {
                $(".name").html("<span class='red'>请输入2~6位中文</span>");
                return false;
            } else {
                $(".name").text('√');
                return true;
            }
        }
        //验证性别字段
        function sexCheck(str) {
            let reg = /^男$|^女&/;
            let sex = $("#sex").val();
            if (!reg.test(sex) || sex == '') {
                $(".sex").html("<span class='red'>从男或女中选择输入</span>")
                return false;
            } else {
                $(".sex").text('√');
                return true;
            }
        }
        //验证电话
        function telCheck(str) {
            let reg = /^\d{11}$/;
            let tel = $("#tel").val();
            if (!reg.test(tel) || tel == '') {
                $(".tel").html("<span class='red'>请输入11位电话号码</span>")
                return false;
            } else {
                $(".tel").text('√');
                return true;
            }
        }
        //验证邮箱字段
        function emailCheck(str) {
            let reg = /^.{3,12}@\w{1,10}\.[a-z]{2,3}$/;
            let email = $("#email").val();
            if (!reg.test(email) || email == '') {
                $(".email").html("<span class='red'>请输入正确的邮箱</span>")
                return false;
            } else {
                $(".email").text('√');
                return true;
            }
        }
        //验证密码字段
        function pwdCheck(str) {
            let reg = /^[\s\S]{6,12}/;
            let pwd = $("#pwd").val();
            if (!reg.test(pwd) || pwd == '') {
                $(".pwd").html("<span class='red'>请输入6-12位密码</span>")
                return false;
            } else {
                $(".pwd").text('√');
                return true;
            }
        }
        //确认密码
        function pwdSure() {
            if ($("#pwd").val() === $("#pwd1").val()) {
                return true;
            } else {
                $(".pwd1").html("<span class='red'>两次密码输入不一致</span>")
                return false;
            }
        }
    </script>
</body>

</html>