HTML5表单验证

css伪类

:optional
没有required属性的input或textarea元素

:required
拥有required属性的input或textarea元素

:invalid
未通过输入类型验证的input或textarea元素

:valid
通过输入类型验证的input或textarea元素

input {
    height: 35px;
    padding: 10px;
    width: 200px;
    border: 1px solid #ddd;
    border-radius: 2px;
}

input:required {
    border-color: lightskyblue;
    background: url('写个星号什么的') no-repeat right center;
}

input:optional {
    border-color: #ddd;
}

input:valid {
    border-color: darkseagreen;
}

input:invalid {
    border-color: indianred;
}

这样写有required属性的元素一开始就是未通过验证即:invalid的样式，虽然觉得很bug但是看了几个浏览器都这么显示的...

验证属性

pattern
正则表达式验证

min
元素最小值

max
元素最大值

required
必填项

step
输入字段的合法数字间隔

maxlength
允许输入的最大字符数

事件

invalid
input元素内的值未通过验证时触发

oninput事件在用户输入时执行，元素值发生变化时立即触发【onchange是失去焦点时候触发】( ie9+)

<input type="email" class="email__input" id="email" required>

var email = document.getElementById('email');

email.oninput = function () {
    this.setCustomValidity('');
};
email.oninvalid = function () {
    if (this.value === '') {
        this.setCustomValidity('请输入邮箱');
    } else {
        this.setCustomValidity('邮箱格式不正确');
    }
};

setCustomValidity(string)
显示字符串信息，提示输出错误，参数为空不提示

checkValidity
表单验先证执行表单元素的checkValidity()方法，通过后才会触发submit

var form = document.getElementById('form')

form.addEventListener('submit', function (event) {
    event.preventDefault();
    if (event.target.checkValidity && event.target.checkValidity()) {
        // 通过验证
    } else {
        // 未通过验证;注意有些低版本的safari浏览器验证但是不提示…
    }
    return false;
}, false);

DOM接口ValidityState

customError

该元素的自定义有效性消息已经通过调用元素的setCustomValidity() 方法设置成为一个非空字符串.

patternMismatch

值与指定的pattern属性不匹配.

rangeOverflow
值大于max属性

rangeUnderflow
值小于min属性

stepMismatch
不符合step属性指定的规则

tooLong
该元素的值的长度超过了maxlength属性中的值.

typeMismatch
该元素的值不符合元素类型所要求的格式(当type 是 email 或者 url时)

valid
其他的约束验证条件都不为true.

valueMissing
该元素有 required 属性,但却没有值.