HTML5表单验证
css伪类
没有required属性的input或textarea元素
拥有required属性的input或textarea元素
未通过输入类型验证的input或textarea元素
通过输入类型验证的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但是看了几个浏览器都这么显示的...
验证属性
正则表达式验证
元素最小值
元素最大值
必填项
输入字段的合法数字间隔
允许输入的最大字符数
事件
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('邮箱格式不正确');
}
};
显示字符串信息,提示输出错误,参数为空不提示
表单验先证执行表单元素的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
该元素的自定义有效性消息已经通过调用元素的setCustomValidity() 方法设置成为一个非空字符串.
值与指定的pattern属性不匹配.
值大于max属性
值小于min属性
不符合step属性指定的规则
该元素的值的长度超过了maxlength属性中的值.
该元素的值不符合元素类型所要求的格式(当type 是 email 或者 url时)
其他的约束验证条件都不为true.
该元素有 required 属性,但却没有值.
Comments