表单验证反馈

表单验证方法

通过查看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>