使用HTML

获取焦点后清除样式,失去焦点时不验证,要求长度大于5,验证成功后边框绿色

oninput不验证,必填且要求长度小于5,失去焦点时验证

失败时不使用默认failStyle,只使用默认配置的failHtml

手动验证,要求内容为-100~100的数字,使用自定义消息容器

点击验证

验证通过

要求内容为-100~100的数字,使用自定义消息容器,且容器不会消失

要求长度大于5,使用自定义类名,不显示规则消息,父容器添加样式

长度大于5,这里使用的是自定义文本,不使用规则消息

要求必填,正则匹配只能数字,自定义必填提示语

长度大于7小于17的密码,必填,获得焦点时不清理样式

重复密码

测试checkbox

测试one select

测试multiple select

只能输入英文数字的textarea

测试&分割符,必填,长度大于3的数字,自定义容器

使用JavaScript,功能更全面

onblur不验证,必填,只能填数字,使用自定义样式

同一个name绑定多个input

oninput不验证,必填,且要求长度为5,失去焦点时验证

局部禁用focus,获得焦点时不清除样式

正则匹配只能数字

正则匹配只能英文字母

手动验证,长度为4,自定义类名,自定义样式,自定义消息容器

点击验证

要求长度为4

测试radio,因为只有required规则,所以请滚到页面底部点击提交按钮测试

测试async功能,先点击页面底部提交按钮查看效果

点击true或false按钮模拟收到服务器结果进行设值

测试&分割符,必填,长度大于3,只能数字

测试fail/pass,必填,只能数字,长度大于5,通过时文字绿色,失败时自定义错误文本格式

提交按钮在网页底部,测试submit和locate功能