JavaScript 表单验证
JavaScript表单验证
什么是表单验证？
表单验证是一种针对网页表单的前端检查，用来确保用户输入的数据是合法的、可接受的。它可以在用户提交表单前执行，因此可以确保数据的准确性，避免了不必要的后续处理。
表单验证的优点
- 表单验证可以减少错误数据的输入，增加数据的准确性。
- 可以加强数据的安全性，避免了对恶意攻击的泄漏。
- 可以节省服务器资源和完成任务的时间成本。
- 可以大大提高用户体验和用户满意度。
JavaScript表单验证的原理
JavaScript表单验证是Front-End 程序的编写，根据不同的表单，对表单中的输入进行校验，可以通过正则表达式、条件判断等方式进行处理，通过处理之后，当数据的格式达不到要求时进行提醒，完成合法验证和非法提醒。
实现JavaScript表单验证
1.设置提交按钮
<input type="submit" value="提交" onclick="return verification()" />
2.编写JavaScript 代码实现验证函数verification()
function verification() {
//获取用户输入的值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var repassword = document.getElementById("repassword").value;
var email = document.getElementById("email").value;
//检查用户名是否为空
if (username == "") {
alert("用户名不能为空！");
return false;
}
//检查密码是否为空
if (password == "") {
alert("密码不能为空！");
return false;
}
//检查两次输入密码是否一致
if (repassword != password) {
alert("两次密码输入不一致！");
return false;
}
//检查邮箱格式是否正确
if (email != "") {
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (!reg.test(email)) {
alert("邮箱格式不正确！");
return false;
}
} else {
alert("邮箱不能为空！");
return false;
}
alert("表单验证成功！");
return true;
}
3.编写HTML 表单
<form>
<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="repassword">确认密码：</label>
<input type="password" id="repassword" name="repassword"/></br>
<label for="email">电子邮件：</label>
<input type="text" id="email" name="email"/></br>
<input type="submit" value="注册" onclick="return verification()"/>
<input type="reset" value="重置"/>
</form>
通过上述代码可实现一个简单的表单验证。在实际应用中，还可以根据需要调整表单验证函数的内容，增加更多验证规则，确保用户输入的数据准确、完整和合法。