表单验证方法
通过查看validity对象下面的valid属性可以查看验证是否通过,当且仅当八种验证都通过时validity.valid值为true,只要有一种验证失败validity.valid值为false。
八种验证:
- valueMissing : 输入值为空时
- typeMismatch : 控件值与预期类型不匹配
- patternMismatch : 输入值不满足pattern正则
- tooLong : 超过maxLength最大限制
- rangeUnderflow : 验证的range最小值
- rangeOverflow:验证的range最大值
- stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
- customError 验证是否符合自定义验证
setCustomValidity(); 自定义验证
表单验证格式:
<form>
<input type="text" required id="text"/>
<input type="submit"/>
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn(){
alert(this.validity.valid);
alert(this.validity.valueMissing);//八种验证之一,当设置了required属性后,输入值为空时,返回true
ev.preventDefault();//阻止默认事件
}
</script>
自定义验证格式:
<form>
<input type="text" id="text"/>
<input type="submit">
</form>
<script>
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
oText.oninput=function(){//通过oninput事件添加自定义验证
if(this.value=="敏感词"){
this.setCustomValidity("请不要输入敏感词");
}else{
this.setCustomValidity("");//符合验证条件时,不显示提示信息"请不要输入敏感词"
}
};
function fn(){
ev.preventDefault();
}
</script>