Html5 控件及表单验证

控件

• [ ]type
  type=“email” 邮件
  type=“number” 数字，max=100,min=0 0~100之间的数
  type=“range” 滑块选择范围value返回控件属性值
  type=“hidden” 隐藏字段
  type=“date” Date pickers,datetime,week,datetime-local,时间控件
  type=“reset” 可重置表单内容
  type="color"颜色选择器
  type=“file” 文件

特性

placeholder=“请输入数字” 提示信息
autocomplate 保存数值备用
autofocus获得焦点
required表单提交之前不能为空
pattern设置正则表达式，如电话号码的正则表达式;

表单验证

是否为空：required=“required” js验证:$("#username")[0].validity.valueMissing==true
是否符合正则规则：pattern="[1][3,4,5,7,8][0-9]{9}" js验证：$("#phone")[0].validity.patternMismatch==true
类型是否相匹配：type= “email” js验证：$("#email")[0].validity.typeMismatch==true
输入长度验证： maxLength=“100” js验证：$("#username")[0].validity.toolong==true
是否向下溢出：min=“0” js验证：$("#age")[0].validity.rangeUnderflow==true
是否向上溢出：max=“99” js验证 ：$("#age")[0].validity.rangeOverflow==true
step验证[type=range,number]：min=“0” max=“100” step=“10” js验证：$("#speed")[0].validity.stepMismatch==true
验证密码两次一致性：js验证：$("#password")[0].validity.customError==true