用js实现 // 3, 有以下表单, 验证用户名, 密码, 手机号 // 用户名只包含数字,字母,下划线, 且长度不小于6位 // 密码长度在8到16位 // 手机号要合法 // 保存到cookie中
时间: 2024-05-19 09:10:45 浏览: 59
可以使用JavaScript的正则表达式来验证用户名、密码、手机号是否符合要求。具体实现如下:
```html
<form id="myForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<label for="phone">手机号:</label>
<input type="text" id="phone" name="phone"><br>
<button type="submit">提交</button>
</form>
```
```javascript
const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
const username = form.username.value.trim();
const password = form.password.value.trim();
const phone = form.phone.value.trim();
// 验证用户名
const usernameRegex = /^\w{6,}$/;
if (!usernameRegex.test(username)) {
alert('用户名必须由数字、字母、下划线组成,并且长度不小于6位');
return;
}
// 验证密码
const passwordRegex = /^.{8,16}$/;
if (!passwordRegex.test(password)) {
alert('密码长度必须在8到16位之间');
return;
}
// 验证手机号
const phoneRegex = /^1[3-9]\d{9}$/;
if (!phoneRegex.test(phone)) {
alert('手机号格式不正确');
return;
}
// 保存到cookie中
document.cookie = `username=${encodeURIComponent(username)}`;
document.cookie = `password=${encodeURIComponent(password)}`;
document.cookie = `phone=${encodeURIComponent(phone)}`;
alert('保存成功');
});
```
在上面的代码中,我们使用了`addEventListener`函数来监听表单的`submit`事件,当用户点击提交按钮时,会触发该事件。然后我们获取了用户名、密码、手机号的值,并使用正则表达式进行验证。如果验证不通过,就弹出提示框并返回。如果验证通过,就将用户名、密码、手机号保存到cookie中,并弹出保存成功的提示框。
阅读全文