javascript使用正则表达式进行表单验证(10分):对一个注册页面进行表单验证,包括:用户名、密码、确认密码、手机号等
时间: 2023-12-24 14:06:06 浏览: 115
好的,我可以为您提供一些基本的 JavaScript 正则表达式示例,来帮助您进行表单验证。以下是一个简单的注册页面表单验证示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>表单验证示例</title>
<meta charset="UTF-8">
</head>
<body>
<h2>注册表单</h2>
<form onsubmit="return validateForm()">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirm_password">确认密码:</label>
<input type="password" id="confirm_password" name="confirm_password"><br><br>
<label for="phone_number">手机号:</label>
<input type="text" id="phone_number" name="phone_number"><br><br>
<input type="submit" value="注册">
</form>
<script>
function validateForm() {
// 获取表单元素
var username = document.getElementById("username").value.trim();
var password = document.getElementById("password").value.trim();
var confirm_password = document.getElementById("confirm_password").value.trim();
var phone_number = document.getElementById("phone_number").value.trim();
// 定义正则表达式
var usernameRegEx = /^[a-zA-Z0-9_-]{4,16}$/; // 用户名为 4-16 位字母或数字,可包含 - 和 _
var passwordRegEx = /^[a-zA-Z0-9_-]{6,18}$/; // 密码为 6-18 位字母或数字,可包含 - 和 _
var phoneRegEx = /^1[3456789]\d{9}$/; // 手机号为 11 位数字,以 1 开头且第二位为 3-9
// 验证用户名
if (!usernameRegEx.test(username)) {
alert("用户名为 4-16 位字母或数字,可包含 - 和 _");
return false;
}
// 验证密码
if (!passwordRegEx.test(password)) {
alert("密码为 6-18 位字母或数字,可包含 - 和 _");
return false;
}
// 验证密码和确认密码是否一致
if (password !== confirm_password) {
alert("密码和确认密码不一致");
return false;
}
// 验证手机号
if (!phoneRegEx.test(phone_number)) {
alert("手机号不正确");
return false;
}
// 表单验证通过
alert("表单验证通过!");
return true;
}
</script>
</body>
</html>
```
在这个示例中,我们使用了 `trim()` 方法来去除用户输入的空格。我们定义了三个正则表达式来验证用户名、密码和手机号。`test()` 方法用于测试一个字符串是否匹配某个正则表达式,如果匹配则返回 `true`,否则返回 `false`。我们还验证了密码和确认密码是否一致,并在表单验证通过时弹出一个提示框。
阅读全文