HTML5 表单 中

input 属性

autofocus 页面加载时自动获得焦点

required   非空字段输入框

placeholder 提供一种提示(hint),输入域为空时显示。

pattern 规定验证input域的模式(正则表达式)

pattern="[a-zA-Z0-9],{6,10}"

pattern="[a-zA-Z0-9],{6,16}"

pattern="^1[34578][0-9](9)$"

height \width 仅仅用于image的input的属性

qq注册认证

validity属性

validity属性获取表单元素的valiityState对象,该对象包括8个方面的验证结果

var validityState=dom

<script>
var form=document.querySelector('form');
var nick=document.querySelector('#nick');
var vali=nick.validty;
console.log(vali);
if(vali.valueMissing){
nick.setCustomValidity("昵称不能为空”);
} invalid 事件,只要发生表单的验证,所有未通过验证的表单元素都会收到一个invalid的事件
form.addEventListener(invalid',function(event{
var ekm=event.target;
var vail=elm.validity;未通过验证的对象获取
var name=elm.name;
switch(name){
case'nick';
if(vali.valueMissing){
elm.setCoustomValidity("昵称不能为空“);
}else if(vali.patternMIsmatch){
elm.setCoustomvalidity('必须为英文');
else{
elm.setCoustomvalidity('');
}
break; } <style>
input:valid{
}验证通过时的样式
input:invalid{
}

validityState对象

valueMissing 目的:确保表单中的值已填写 用法:将表单元素设置了required特性,则为必填项;如果必填项输入值为空,value Missing属性将返回true,否则返回false

typeMismatch 目的:保证输入值与预期类型相互匹配(url、Email等)

patternMismatch 目的:正则是否有效

上一篇:easyui的组合网格:combogrid的选中事件


下一篇:JS轻松实现单击文本框弹出选择日期