用js实现 // 3, 有以下表单, 验证用户名, 密码, 手机号 // 用户名只包含数字,字母,下划线, 且长度不小于6位 // 密码长度在8到16位 // 手机号要合法 // 保存到cookie中
时间: 2024-05-19 12:10:49 浏览: 59
好的,可以使用 JavaScript 中的正则表达式来完成这个任务。下面是一个示例代码,实现了对用户名、密码和手机号的验证,并将它们保存到 cookie 中。
```js
// 获取表单元素
const form = document.querySelector('form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const phoneInput = document.querySelector('#phone');
// 定义正则表达式
const usernameRegex = /^\w{6,}$/; // 匹配用户名,只包含数字、字母、下划线,且长度不小于6位
const passwordRegex = /^.{8,16}$/; // 匹配密码,长度在8到16位
const phoneRegex = /^1\d{10}$/; // 匹配手机号,11位数字,以1开头
// 表单提交事件
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默认提交行为
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
const phone = phoneInput.value.trim();
// 验证用户名
if (!usernameRegex.test(username)) {
alert('用户名不符合要求!');
return;
}
// 验证密码
if (!passwordRegex.test(password)) {
alert('密码不符合要求!');
return;
}
// 验证手机号
if (!phoneRegex.test(phone)) {
alert('手机号不合法!');
return;
}
// 将用户名、密码、手机号保存到 cookie 中
document.cookie = `username=${username}; path=/`;
document.cookie = `password=${password}; path=/`;
document.cookie = `phone=${phone}; path=/`;
alert('保存成功!');
});
```
这段代码先获取了表单元素和需要用到的正则表达式,然后监听表单提交事件。在事件处理函数中,首先获取了输入框中的值,并使用正则表达式进行验证。如果验证不通过,就弹出提示并返回。如果验证通过,就将用户名、密码、手机号保存到 cookie 中,并弹出保存成功的提示。
阅读全文