正则判断表单输入

Posted 2020-08-07 超小级小萝莉

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了正则判断表单输入相关的知识，希望对你有一定的参考价值。

简单的表单验证，直接上代码，初学正则，加油加油！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
    <form action="" >
        <ul>
            <li>用户账号：<input type="text" id="count" onblur="checkCount()"><span id="countwr"></span></li>
            <li>真实姓名：<input type="text" id="name" onblur="checkName()"><span id="namewr"></span></li>
            <li>输入密码：<input type="password" id="password" onblur="checkPassword()"><span id="passwordwr"></span></li>
            <li>确认密码：<input type="password" id="pdConfirm" onblur="chenckPdconfirm()"><span id="pdConfirmwr"></span></li>
        </ul>
        <button type="submit" id="hidden-window-yes" >确定</button>
    </form>
    <script>
        //验证账号
        function checkCount() {
            var exp = /^([0-9]{6})$/;
            var count = document.getElementById("count").value;
            var countwr=document.getElementById("countwr");
            console.log(exp.test(count));
            if(exp.test(count)){
                countwr.innerText = "输入正确！";
                countwr.style.color="green";
                return true;
            }
            else {
                countwr.innerText = "请输入六位数字！";
                countwr.style.color="red";
                return false;
            }
        }
        //验证姓名
        function checkName() {
            var exp = /^([\u4E00-\u9FA5]+)$/;
            var name = document.getElementById("name").value;
            var namewr =document.getElementById("namewr");
            console.log(exp.test(name));
            if(exp.test(name)) {
                namewr.innerText = "输入正确！";
                namewr.style.color="green";
                return true;
            }
            else {
                namewr.innerText = "输入错误！";
                namewr.style.color = "red";
                return false;
            }

        }
                
        //验证密码
        function    checkPassword() {
            var exp =/^([0-9a-z]{8})$/;
            var password = document.getElementById("password").value;
            var passwordwr = document.getElementById("passwordwr");
            if(exp.test(password)) {
                passwordwr.innerText="输入正确！";
                passwordwr.style.color="green";
                return true;
            }
            else{
                passwordwr.innerText = "输入错误！";
                passwordwr.style.color = "red";
                return false;
            }
        }
        //验证确认密码
        function  chenckPdconfirm() {
            var password = document.getElementById("password").value;
            var pdConfirm = document.getElementById("pdConfirm").value;
            var pdConfirmwr = document.getElementById("pdConfirmwr");
            if(password == pdConfirm) {
                pdConfirmwr.innerText="密码匹配！";
                pdConfirmwr.style.color="green";
                return true;
            }
            else {
                pdConfirmwr.innerText="密码不匹配！";
                pdConfirmwr.style.color="red";
                return false;
            }

        }
    
    </script>
</body>
</html>

以上是关于正则判断表单输入的主要内容，如果未能解决你的问题，请参考以下文章

jquery表单验证怎么判断输入的中文

JavaScript表单通过正则表达式验证电话号码

jsp页面中正则表达式的使用

（基于织梦）表单提交验证

只能输入文字，数字，大小写英文的js正则表达式.

正则表达式表单验证实例代码详解