表单验证:
validity对象,通过下面的valid可以查看验证是否通过,如果八种验证都通过返回true,否则返回false
- oText.addEventListener("invalid",fn1,false); // invalid 验证反馈事件
- ev.preveDefault() // 阻止默认验证
- valueMissing:输入值为空时
- typeMismatch:控件值与预期类型不匹配
- patternMismatch:输入值不满足pattern正则
- tooLong:超过maxLength最大限制
- rangeUnderflow:验证的range最小值
- rangeOverflow:验证的range最大值
- stepMismatch:验证的range的当前值是否符合min、max及step的规则
- customError 不符合自定义验证
>> setCustomValidity(); 自定义验证
<form> <input type="text" id="text" name="user" placeholder="请输入4-16个字符" required pattern="\d{1,5}" maxlength = "5" /> <input type="range" max="5" min="0" step="2" /> <input type="submit" formnovalidate/> // formnovalidate关闭表单验证 </form> <script> var oText=document.getElementById("text"); oText.addEventListener("invalid",fn,false); // lnvalid事件:验证反馈 // ev.preventDefault 阻止默认验证 oText.oninput=function() { // oninput事件 if(this.value === "敏感词"){ // 自定义事件 this.setCustomValidity("请不要输入敏感词"); } else { this.setCustomValidity(""); // 必须清空 } } function fn() { // 存储表单反馈信息对象 console.log(this.validity) // valid查看验证是否通过 boolean值 console.log(this.validity.valid) console.log(this.validity.valueMissing); //前提具有required 输入为空时候返回true。 } //typeMismatch、patternMismatch、customError 与valueMissing一样
当条件不被满足时,返回为true,反之,返回false。 ------- 意义不大 ------- // tooLong 超过了maxLength最大值,open浏览器下为true,其余浏览器可能不支持(或返回false),
且设置maxLength后正常输入无法超过maxLength设置的长度,
代码可以oText.value = "123456" ...
注意将input类型换成email类型方便查看 // rangeUnderflow、rangeOverflow、stepMismatch 与tooLong类似 // 当八项内容都为false时,this.validity.valid返回true。
当八项有一项为true,this.validity.valid返回false。 </script>