用正则表达式验证表单

最新推荐文章于 2024-01-15 09:10:50 发布

天晓蓝

最新推荐文章于 2024-01-15 09:10:50 发布

阅读量122

点赞数

文章标签：正则表达式前端 javascript

本文链接：https://blog.csdn.net/weixin_45555153/article/details/131730597

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        .err{
            font-size: small;
            font-weight:1.5px;
            
        }
    </style>
    <script>
        window.onload = function () {
            //点击提交时触发表单验证
            document.querySelector("#userform").onsubmit = function () {
                //submit会返回true或false，true提交，false不提交

                return checkname() && checkpassword() && checkemail();
            }
        
        //获取每个框对象
        var username = document.querySelector("#username");
        var password = document.querySelector("#password");
        var email = document.querySelector("#email");

        //每个框失去光标验证值的有效性，为每个框绑定事件
        username.onblur = checkname;
        password.onblur = checkpassword;
        email.onblur = checkemail;

        //设置每个框验证的正则表达式
        //用户名正则：包括4到16位的字母、数字、下划线、减号
        var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;

        //密码强度正则：最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;

        //email正则
        var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
    
        //判断用户名
        function checkname() {
            //获取用户名对象的值：trim方法去除字符串两端空格
            var name=username.value.trim();

            var usermessage=document.querySelector(".nameerr")
            if(uPattern.test(name)){
              usermessage.innerHTML="用户名格式正确";
              usermessage.style.color="green";
            }else{
                usermessage.innerHTML="用户名格式错误，应包括4到16位的字母、数字、下划线、减号";
                usermessage.style.color="red";
            }
        }

        //判断密码
        function checkpassword() {
            //获取密码的值
            var pasw=password.value.trim();
            var paswmessage=document.querySelector(".passworderr");
            if(pPattern.test(pasw)){
                paswmessage.innerHTML="密码格式正确";
                paswmessage.style.color="green";
            }else{
                paswmessage.innerHTML="email错误，最少6位，包括至少1个大写字母、1个小写字母、1个数字、1个特殊字符";
                paswmessage.style.color="red";
            }
        }
        //判断邮箱
        function checkemail() {
            var em=email.value.trim();
            var emailmessage=document.querySelector(".emailerr");
            if(ePattern.test(em)){
                emailmessage.innerHTML="email格式正确";
                emailmessage.style.color="green";
            }else{
                emailmessage.innerHTML="邮箱格式错误";
                emailmessage.style.color="red";
            }
        }
    }
    </script>
</head>

<body>
    <form action="#" method="post" id="userform">
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" name="username" id="username" placeholder="请输入一个使用的用户名">
                </td>
                <td>
                    <span class="nameerr err">用户名包括4到16位的字母、数字、下划线、减号</span>
                </td>
            </tr>
            <tr>
                <td> &nbsp;&nbsp;&nbsp;密码：</td>
                <td>
                    <input type="text" name="password" id="password" placeholder="请输入密码">
                </td>
                <td>
                    <span class="passworderr err">密码最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符</span>
                </td>
            </tr>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;邮箱：</td>
                <td>
                    <input type="text" name="email" id="email" placeholder="请输入邮箱">
                </td>
                <td>
                    <span class="emailerr err">请输入正确的email格式</span>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" value="提交">
                </td>
                <td>
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>