用JavaScrip正则表达式验证form表单的方法

2023年6月10日下午6:42 • JavaScript

下面是使用JavaScript正则表达式验证表单的攻略：

一、需求分析

JavaScript正则表达式可以对表单中的输入内容进行有效地验证。在使用正则表达式之前，首先需要明确以下几点：

要验证哪些内容，如表单中的用户名、密码、邮箱等；
需要验证的内容的限制条件，如密码必须包含大小写字母和数字等；
如果验证不通过，需要如何提示用户进行正确的输入。

二、编写正则表达式

正则表达式是JavaScript中非常重要和强大的功能。对于不同的验证需求，需要编写相应的正则表达式，例如：

1.验证用户昵称

function checkNickname(nickname){
    var pattern = /^[\u4e00-\u9fa5\w]{2,10}$/;  
    return pattern.test(nickname);
}

/^[\u4e00-\u9fa5\w]{2,10}$/：这是正则表达式的核心代码，其中"^"表示匹配输入字符串的开头，"$"表示匹配字符串的结尾。"[\u4e00-\u9fa5\w]"表示匹配汉字、字母、数字和下划线，"{2，10}"表示匹配2到10个字符。

2.验证密码

function checkPassword(password){  
    var pattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;  
    return pattern.test(password);  
}

/^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,16}$/：这个正则表达式可以匹配8至16位数字或字母，而且必须同时包含字母和数字。

三、表单验证

在使用正则表达式之前，需要明确验证的时机，例如：

document.getElementById('checkNickname').onclick = function(){  
    var nickname = document.getElementById('nickname').value;  
    if(checkNickname(nickname)){  
        alert('格式正确');  
    }else{  
        alert('格式不正确，昵称只能包含汉字、字母、数字和下划线，长度为2至10个字符');  
    }  
};  

document.getElementById('checkPassword').onclick = function(){  
    var password = document.getElementById('password').value;  
    if(checkPassword(password)){  
        alert('格式正确');  
    }else{  
        alert('格式不正确，要求：8到16位数字或字母，必须同时包含字母和数字');  
    }  
};

这里使用了onclick事件，如果表单中的内容符合正则表达式，则弹出“格式正确”提示框，否则弹出错误提示框。

四、完整示例

下面是一个完整的示例，可以用于验证表单中的用户名、密码和邮箱：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>表单验证</title>  
</head>  
<body>  
    <form>  
        用户名：<input type="text" name="nickname" id="nickname" required/><br />  
        密码：<input type="password" name="password" id="password" required/><br />  
        邮箱：<input type="text" name="email" id="email" required/><br />  
        <button type="button" id="checkNickname">验证昵称</button>  
        <button type="button" id="checkPassword">验证密码</button>  
        <button type="button" id="checkEmail">验证邮箱</button>  
    </form>  
    <script type="text/javascript">  
        function checkNickname(nickname){  
            var pattern = /^[\u4e00-\u9fa5\w]{2,10}$/;  
            return pattern.test(nickname);  
        }  

        document.getElementById('checkNickname').onclick = function(){  
            var nickname = document.getElementById('nickname').value;  
            if(checkNickname(nickname)){  
                alert('格式正确');  
            }else{  
                alert('格式不正确，昵称只能包含汉字、字母、数字和下划线，长度为2至10个字符');  
            }  
        };  

        function checkPassword(password){  
            var pattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/;  
            return pattern.test(password);  
        }  

        document.getElementById('checkPassword').onclick = function(){  
            var password = document.getElementById('password').value;  
            if(checkPassword(password)){  
                alert('格式正确');  
            }else{  
                alert('格式不正确，要求：8到16位数字或字母，必须同时包含字母和数字');  
            }  
        };  

        function checkEmail(email){  
            var pattern = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;  
            return pattern.test(email);  
        }  

        document.getElementById('checkEmail').onclick = function(){  
            var email = document.getElementById('email').value;  
            if(checkEmail(email)){  
                alert('格式正确');  
            }else{  
                alert('格式不正确，邮箱格式为example@domain.com');  
            }  
        };  
    </script>  
</body>  
</html>

在这个示例中，先定义了三个正则表达式用于验证用户名、密码和邮箱格式，然后在onclick事件中通过value属性获取表单中的数据，并根据正则表达式进行验证，如果符合条件，则弹出正确提示框，否则弹出错误提示框。

希望这个攻略可以对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用JavaScrip正则表达式验证form表单的方法 - Python技术站