这两天换了新环境,感觉到果然不能在一个地方待太久,否则会变的安逸。。。
做表单验证是一个前端开发者的基本功了。前端的表单验证不仅功能齐全,而且可以大大减轻服务器的压力。(你想想,如果没有前端,你mxc写成mxx都要往服务器发一个请求,这谁顶得住啊)
表单验证通常采用 策略模式 的思想,我们把一个个验证规则封装成一个函数,比如 非空规则、最大长度规则 等。不同的输入框选择某一个或者某几个规则进行验证。
这样做有它的好处,当然,也有坏处。
好处是每个规则相对独立(包括它的检验规则和出错提示),你可以把它们封装在一起; 坏处是当你写一个表单有10个input时,每个input就要有几十行的验证规则。你不得不说,这样的代码有些冗长了。
其实HTML5增加了很多种类型的input,每个input还支持了 pattern / minlength / maxlength 等验证规则。但是后来发现每个浏览器的行为几乎不同,再加上兼容性的问题,大家都不太想用。
但后来,H5提供了 ValidityState对象 (众望所归!激动…):
HTML5新特性:
placeholder ——初始无焦时的提示文本
required ——规定输入域不能为空
pattern ——规定验证input域的模式(正则)
validity属性:
可获取对应表单的 validityState对象 ,如:
var validityState=document.getElementById("id名").validity;
此对象包括八个属性 —— 分别针对八个方面错误进行验证。 这里说一下最常用的:
valueMissing —— 若设置 required(必填),但此项为空,则无法通过验证,此属性返回true值
typeMismatch —— 输入值与 type 不匹配,则返回true
patternMismatch —— 输入值与 pattern 中的正则不匹配,则返回true
tooLong —— 输入内容超过了表单 maxLength 限定长度
如:我在“ 注册 ”功能里这样写:
*昵称:
...
JS里:
//采用jQuery写法
$(function(){
$("submit").click(function(){
var u=document.querySelector("#uName");
if(u.validity.valueMissing===true){
u.setCustomValidity("昵称不能为空!");
}else if(u.validity.patternMismatch===true){
u.setCustomValidity("昵称必须是6-10位非数字字符!");
}else{
u.setCustom.Validity("");
}
})
})
你看,上面写了required和pattern,下面就验证非空和正则匹配。
本文同步分享在 博客“行舟客”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。