html(4)使用正则表达式进行表单验证(10分):对一个注册页面进行表单验证,包括:用户名、密码、确认密码、手机号等。
时间: 2024-01-15 09:02:56 浏览: 135
js正则表达式注册页面表单验证
好的,我可以为您提供一些基本的 HTML 和 JavaScript 代码,用于表单验证。
1. 验证用户名:用户名只能由字母、数字、下划线组成,长度在6-20位之间。
```html
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required pattern="^[a-zA-Z0-9_]{6,20}$">
```
2. 验证密码:密码由数字、字母、特殊符号组成,长度在6-20位之间。
```html
<label for="password">密码:</label>
<input type="password" id="password" name="password" required pattern="^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}$">
```
3. 验证确认密码:确认密码必须与密码一致。
```html
<label for="confirm_password">确认密码:</label>
<input type="password" id="confirm_password" name="confirm_password" required oninput="checkPasswordMatch()">
<span id="password_match"></span>
<script type="text/javascript">
function checkPasswordMatch() {
var password = document.getElementById("password").value;
var confirm_password = document.getElementById("confirm_password").value;
if (password != confirm_password) {
document.getElementById("password_match").innerHTML = "密码不匹配";
} else {
document.getElementById("password_match").innerHTML = "密码匹配";
}
}
</script>
```
4. 验证手机号码:验证手机号码格式是否正确。
```html
<label for="mobile">手机号码:</label>
<input type="tel" id="mobile" name="mobile" required pattern="^1[3456789]\d{9}$">
```
以上是一些基本的 HTML 和 JavaScript 代码,您可以根据您的实际需求进行修改和完善。同时,需要注意的是,前端表单验证只是一种验证方式,不代表能够完全保证数据的安全性,还需要结合其他的安全措施来提高数据的安全性。
阅读全文