下面是详细的"js注册时输入合法性验证方法"攻略：
步骤一：获取注册表单中需要验证的DOM元素
在注册表单中，可能需要验证用户的姓名、邮箱、密码、确认密码等信息，我们需要获取这些DOM元素，方便后面使用。
<body>
<form id="registerForm">
<div>
<label for="userName">用户名：</label>
<input type="text" id="userName" name="userName" />
</div>
<div>
<label for="email">电子邮箱：</label>
<input type="text" id="email" name="email" />
</div>
<div>
<label for="password">设置密码：</label>
<input type="password" id="password" name="password" />
</div>
<div>
<label for="confirmPassword">确认密码：</label>
<input type="password" id="confirmPassword" name="confirmPassword" />
</div>
<div>
<button type="submit">注册</button>
</div>
</form>
</body>
<script>
const formEl = document.querySelector('#registerForm');
const userNameEl = document.querySelector('#userName');
const emailEl = document.querySelector('#email');
const passwordEl = document.querySelector('#password');
const confirmPasswordEl = document.querySelector('#confirmPassword');
</script>
步骤二：定义验证函数
接下来，我们需要为每个输入框元素定义一个验证函数，用于验证输入是否合法。一个简单的验证函数应该接受一个参数，表示需要验证的值，返回一个布尔值，表示是否合法。
以下是一个例子，用于验证用户名是否为合法字符串。
function validateUsername(username) {
const usernameReg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/; // 匹配由数字字母下划线组成的5-16位字符串，且首字母必须是字母
return usernameReg.test(username);
}
步骤三：注册表单提交事件
接下来，我们需要为注册表单添加一个提交事件，用于在用户提交表单时验证输入是否合法。在提交事件回调函数中，我们需要对每个输入框元素依次进行验证。
以下是一个例子：
formEl.addEventListener('submit', function(e) {
e.preventDefault(); // 防止浏览器默认刷新
const username = userNameEl.value.trim();
const email = emailEl.value.trim();
const password = passwordEl.value.trim();
const confirmPassword = confirmPasswordEl.value.trim();
if (!validateUsername(username)) {
alert('用户名不合法！');
return;
}
if (!validateEmail(email)) {
alert('邮箱不合法！');
return;
}
if (!validatePassword(password)) {
alert('密码长度不合法！');
return;
}
if (password !== confirmPassword) {
alert('两次密码不一致！');
return;
}
// 表单提交后续操作
});
上面这个例子，通过e.preventDefault()方法阻止了表单默认的提交刷新行为。然后分别调用验证函数对每个表单元素的值做出了验证，并在验证不合法时弹出相应的提示，否则直接执行表单提交后续的操作。
示例一：验证邮箱
定义邮箱合法性验证函数：
function validateEmail(email) {
const emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
return emailReg.test(email);
}
在表单提交回调函数中使用该函数进行验证：
formEl.addEventListener('submit', function(e) {
e.preventDefault(); // 防止浏览器默认刷新
const username = userNameEl.value.trim();
const email = emailEl.value.trim();
const password = passwordEl.value.trim();
const confirmPassword = confirmPasswordEl.value.trim();
if (!validateUsername(username)) {
alert('用户名不合法！');
return;
}
if (!validateEmail(email)) {
alert('邮箱不合法！');
return;
}
if (!validatePassword(password)) {
alert('密码长度不合法！');
return;
}
if (password !== confirmPassword) {
alert('两次密码不一致！');
return;
}
// 表单提交后续操作
});
示例二：验证密码长度
定义密码合法性验证函数：
function validatePassword(password) {
return password.length >= 8 && password.length <= 16;
}
在表单提交回调函数中使用该函数进行验证：
formEl.addEventListener('submit', function(e) {
e.preventDefault(); // 防止浏览器默认刷新
const username = userNameEl.value.trim();
const email = emailEl.value.trim();
const password = passwordEl.value.trim();
const confirmPassword = confirmPasswordEl.value.trim();
if (!validateUsername(username)) {
alert('用户名不合法！');
return;
}
if (!validateEmail(email)) {
alert('邮箱不合法！');
return;
}
if (!validatePassword(password)) {
alert('密码长度不合法！');
return;
}
if (password !== confirmPassword) {
alert('两次密码不一致！');
return;
}
// 表单提交后续操作
});
上面这个例子，validatePassword函数用于验证密码长度是否在8到16个字符之间。在表单提交事件回调函数中，如果密码不合法，会弹出一个提示框，提示密码长度不合法。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js注册时输入合法性验证方法 - Python技术站
微信扫一扫 
支付宝扫一扫 