JavaScript实现输入验证(简单的用户注册)
时间: 2023-08-02 07:45:32 浏览: 54
好的,下面是一个简单的JavaScript实现输入验证的例子,适用于用户注册:
HTML代码:
```html
<form>
<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="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br><br>
<input type="submit" value="注册">
</form>
```
JavaScript代码:
```javascript
// 获取表单元素
const form = document.querySelector('form');
const usernameInput = form.querySelector('#username');
const passwordInput = form.querySelector('#password');
const confirmPasswordInput = form.querySelector('#confirmPassword');
// 表单提交事件
form.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取表单输入值
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
const confirmPassword = confirmPasswordInput.value.trim();
// 验证用户名输入是否为空
if (username === '') {
alert('用户名不能为空');
return;
}
// 验证密码输入是否为空
if (password === '') {
alert('密码不能为空');
return;
}
// 验证确认密码输入是否为空
if (confirmPassword === '') {
alert('确认密码不能为空');
return;
}
// 验证密码与确认密码是否一致
if (password !== confirmPassword) {
alert('密码与确认密码不一致');
return;
}
// 表单通过验证,提交表单
alert('注册成功');
form.submit();
});
```
简单说明一下代码:
1. 首先,获取表单元素和表单中的输入元素。
2. 监听表单提交事件,阻止表单默认提交行为。
3. 获取表单中的输入值,并进行验证。如果验证不通过,弹出相应的提示信息,阻止表单提交。如果验证通过,弹出“注册成功”提示信息,提交表单。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)