表单验证意义与场景
降低服务器压力
拦截不合格的数据,避免直接提交到服务器,可以显著降低服务器开销
提升用户体验
早期的互联网,表单项都是非常多的,注册个账号,经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证,反馈是实时的,而且脚本还能把你定位到填写错误的具体 字段。现在虽然无刷新技术早已普及,但是只依赖服务端验证,还是会有几百毫秒的延迟,实际使用会 有一种很难受的粘滞感。
表单验证举例
js脚本定义 定义了判别用户名的方法
<script>
function validateName(){
var name = document.getElementById("userName").value;
var msg=document.getElementById("nameMsg");
if(name==null && name==""){
msg.innerHTML="用户名不能为空!!";
msg.style.color="red";
return false;
}else if(name.length<6){
msg.innerHTML="用户名长度不合法!!";
msg.style.color="red";
return false;
}
msg.innerHTML="?";
msg.style.color="green";
return true;
}
</script>
表单定义
<div>
<form action="Success.html" method="get" enctype="multipart/form-data">
 用户名 :<input type="text" id="userName" name="userName" placeholder="请输入用户名" required="required" onblur="validateName()">
<span id="nameMsg">用户名长度至少6位</span>
</form>
</div>
界面效果展示
用户名长度必须大于8位
|