总有一些用户比较调皮,他们在填写表单的时候喜欢胡乱填写,造成后端程序不能接收到想要的数据。

或许你会说:“这没关系!难不到我!”。

于是你在后端程序通过一系列的判断,来检验用户输入的数据,有不对的地方就提示用户重新填写。这样做,虽然能解决问题,可是又增加了服务器的工作量。服务器的资源有限,任何能在前端解决掉的事情尽量还是不要交给服务器来做。

HTML5早就为我们考虑到了这样的事情,让我们来看一下是怎么做的吧:)

只需要给要验证的组件写上pattern属性即可,pattern属性的值是正则表达式。

例如:

html_24表单验证那些事儿

这样,在提交数据的时候,我们就只能输入a或b了,输入其他的任何字符,就会报错!

html_24表单验证那些事儿 

 

 

我们修改一下正则表达式来看一下,比如我们只想让用户输入数字。

例如:

html_24表单验证那些事儿

 

这样,用户就只能输入0-9的数字了,否则就会报错!

html_24表单验证那些事儿

 

我们还可以限制用户只能输入3个数字

例如:

html_24表单验证那些事儿

如果用户输入的数字数量超过了3个,就会报错!

html_24表单验证那些事儿

 

是不是非常方便和灵活:)

你可能要说:“可我不会正则表达式怎么办啊?”?

没关系,你先记着HTML中有一个用于表单验证的属性pattern就好,关于正则表达式的知识,只要你跟上我的课程,到了JS那里,我自然会教会你的:)

学知识,一定要循序渐进、系统性的去学习,切勿跳跃式学习,那样只会消灭自己学习的信心。

 

有些内容我们想规定让用户提交数据的时候必须填写,也就是说那是一个必填项。针对这个问题HTML5也早就为我们考虑到了。

我们只需要给表单写上required属性即可,该属性的值与名称一模一样即,required='required'

例如:

html_24表单验证那些事儿

 

这样一来,用户要是不填写该选项,程序就会自动提示他填写此项:)

html_24表单验证那些事儿

 

 

 

相关文章: