小试html5表单验证

html5为表单添加了新的功能,称为form2.0,其中就有表单验证功能。比如,type为email或url的input,就会自动验证输入的字符串是否满足相应的格式。怎么验证呢?类型为input的dom节点,增加了方法checkValidity(),返回值为布尔型,如果value值满足相应的格式,则返回true,否则返回false。这么一来,原来需要通过js进行的验证,就可以由浏览器引擎帮我们做了。

理论上是很好,但。。。

其实它工作得并不是那么好,第一,浏览器究竟做了怎样的正则验证,我们不知道,它是不是一定工作得很好呢?我试了下type为email的input的验证,我输入”adang“,checkValidity()的时候说格式不对,这个工作得很好,可是我输入“它居然通过了,很明显这是一个不正确的邮箱格式啊,奇怪。

另外,input类型添加了required属性,添加这个属性之后,要求input必填,如果是空值,则checkValidity()无法通过。但事实上,我们在实际开发中,除了不能是空值,也不能是纯空格,在验证前,会进行trim操作的。但表单的required属性并不会帮我们进行trim的处理再验证,所以如果输入空格,也是可以通过验证的。

所以表单2.0工作得并不是那么完美,还是少不了js辅助进行验证。

原文地址:https://www.cnblogs.com/cly84920/p/4426576.html