简述 HTML5 的表单验证,html5表单自带的验证学习

html5表单验证

之前一直不知道怎么自定义提示信息，今天看到了资料就记录一下，也把经常要用到的html5表单验证记录一下。

setCustomValidity() html5内置的js方法，自定义提示信息

oninvalid 提交的input元素的值为无效值时，触发oninvalid事件

表单验证

text.οninput=function(){

text.setCustomValidity("");

};

text.oninvalid=function(){

text.setCustomValidity("请不要输入火星的手机号好吗？");

};

常用的html5验证

type="text"

type="radio"

type="checkbox"

type="email"

type="number"

type="tel"

type="url"

type="zipcode" //邮编

type="date"

type="hour"

type="password"

type="email | tel" //支持多type共存，可以让文本框输入邮箱或号码

step (数字间隔)、min 、 max、 required、pattern、multiple(可选择多个值)、placeholder

//可以输入文字

常用的正则表达式

pattern=" [\u4e00-\u9fa5]" //只匹配中文

pattern="/^\d{6,}$/" // 密码必须是6位数字以上

pattern="/^[a-zA-Z_]\w{5,}$/" // 6位字母组成不能数字开头

//novalidate表示禁用html5自带的表单验证功能