利用HTML5新属性来进行表单验证

发布时间:2019-07-18 11:30:25 阅读:143

HTML5规范未面世以前,要想限制input或者textarea等表单控件字段值的格式,需要使用javascript加上正则表达式来判断用户输入的字符是否符合要求。

2014年10月28日,HTML5规范正式推出,发布新属性的同时也废弃了很多旧属性,input标签也增加了大约10多个新属性。利用新属性,我们甚至可以不用javascript,直接使用新属性即可进行简单的字符串格式限制。

maxmin属性

max属性规定了允许输入字符的最大值,min属性规定了允许输入字符的最小值。两者可以一起食用,更加美味。

Tipsmaxmin 属性适用于以下 input 类型:number, range, date, datetime, datetime-local, month, time 以及 week。

使用方法

<input type="number" class="form-control" max="10" min="3" /> 

添加了max属性在表单提交的时,如果输入的字符不符合max属性规定的值,则会阻止表单提交,并且会提示值的范围。

设置了max属性的input

pattern属性

pattern属性用于验证输入字段的模式,需要输出正则表达式来限制。

Tipspattern 属性适用于以下 input 类型:text, search, url, telephone, email 以及 password 。

使用方法

<input type="text" pattern="[A-z]{3}" /> 

[A-z]{3}表示匹配大写字母a到大写字母z和小写字母a到小写字母z,最大长度为3个字符。

placeholder属性

placeholder属性规定了输入框和文本域的提示文本,当输入框和文本域获得焦点时消失。

Tipsplaceholder 属性适用于以下的 input 类型:text, search, url, telephone, email 以及 password。

使用方法

<input type="text" placeholder="乐客互联网站制作" />

required属性

required属性规定必需在提交之前填写输入字段,如果指定了该属性,则表示该字段是必填(必选)的。

Tipsrequired属性适用于以下 input 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

使用方法

<input type="text" required="required" /> 

添加了该属性,在表单被提交时,如果字段值为空,则会阻止表单的提交动作,并且会提示“请填写该字段”。

添加了required属性的输入框

总结

使用以上属性可以极大程度的使表单验证更为简单,但如果是更复杂的验证,还是需要和javascript来共同验证。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"利用HTML5新属性来进行表单验证",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560