HTML5内置表单验证 Build-in Form Validation

来源：互联网发布：源码生成器编辑：程序博客网时间：2024/06/06 12:21

HTML5表单的内置验证功能，可以通过required, pattern属性添加限制，用type="email"或"url"进行格式限制，在提交时自动进行验证病给出提示信息。也可以自定手动验证，显示自定义信息等。

1.通过input元素的属性指定限制

1)required (无值)： e.g.<input type="text" required>指定该项为一个必填项

2)minlength="m" 以及maxlength="n": e.g. <input type="text" minlength="3" maxlength="8" />：指定该项字符长度要求。

3)min以及max: e.g. <inputtype="number" min="1"max="10">:用于type为number的输入项，指定最小值和最大值.

4)pattern="regex": e.g.<input type="text" pattern="[^0-9a-f]" required/>指定一个正则表达式作为验证条件

...

当指定type="email"或type="url"时，在提交时html5会按照email或url的格式验证，不需要正则表达式。

2.通过 ':valid' and ':invalid'伪类自定义样式

给定以上限制后，:valid将匹配合法输入项，:invalid匹配不合法输入项

<style>input:invalid { /* an invalid element matches the :invalid pseudo-class*/border: 2px solid red;}input:valid { /* a valid element matches the :valid pseudo-class*/border: 2px solid green;}</style>

3.使用.checkValidity()手动触发验证

除了在点击submit时自动验证，input, form元素拥有checkValidity()方法，可以在想要的时候手动验证

<input type="email" id="mancheck" /><script>var mancheck = document.querySelector("#mancheck");mancheck.onblur = () => {  // 例如在输入焦点离开时进行验证mancheck.checkValidity();if(mancheck.validationMessage) {alert(mancheck.validationMessage); // 验证结果信息在元素的validationMessage属性中}}</script>

FormElement的checkValidity()方法将验证它所包含的所有input项。

5.自定义验证信息setCustomValidity(message)

读取验证信息通过elm.validationMessage,html5已经提供了详细的错误信息，覆盖原来的内置信息需要通过elm.setCustomValidity(message).

<input type="email" id="cusmsg" /><script>var cusmsg= document.querySelector("#cusmsg");cusmsg.onblur= () => {  cusmsg.checkValidity();  if(cusmsg.validity.typeMismatch) {    cusmsg.setCustomValidity('Custom message: Email is invalid');    alert(cusmsg.validationMessage);  }}; </script>

当使用setCustomValidity后，当前input元素即被设为invalid状态。

6.elem.validity包含具体的验证结果

自定义invalid显示信息或其他行为时，可以从validity属性读取具体的invalid类型：

elem.validity.valueMissing: 为true 如果没有填写并且有required限制

elem.validity.typeMismatch: 为true 如果 email 或url的格式错误

elem.validity.rangeOverflow

elem.validity.patternMismatch

...

elem.validity.valid:为true 如果以上所有都有效。

阅读全文

0 0

源码生成器

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子血丑血丑读什么一个血一个丑一个血一个丑念什么大便带乌血死亡血书血书一人血书无主之地3血书在哪刷吞食天地2血书迷宫怎么走吞食天地血书迷宫怎么走血亲血亲党必备血亲文长篇家庭血亲收亲人怀孕收全家的血亲文神龙宝典之血亲孽缘思问类似瘦不了的血亲作家大便全是血怎么回事大便里面有血怎么回事便后擦屁股有血便中有血是什么原因脓血便见于哪些疾病脓血便图片拉肚子血便泰迪拉血便怎么回事鲜红色血便拉血便不痛婴儿血便宝宝拉血便怎么回事新生儿血便果酱样血便排血便拉粘液血便暗红色血便提示痢疾血便狗狗拉血便怎么回事浓血便图片便少量血便前拉血便便滴血