HTML5表单验证新特性

本文链接： https://blog.csdn.net/qq_43624878/article/details/102578926

这两天换了新环境，感觉到果然不能在一个地方待太久，否则会变的安逸。。。

做表单验证是一个前端开发者的基本功了。前端的表单验证不仅功能齐全，而且可以大大减轻服务器的压力。（你想想，如果没有前端，你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 限定长度

如：我在“ 注册 ”功能里这样写：

<form action="" method="" class="reg-form">
	<div class="reg-input">
		<label><i>*</i>昵称：</label>
		<input type="text" id="uName" required placeholder="请输入6-10个字符" pattern="[a-zA-Z]{6,10}" />
	</div>
	...
	<div class="submit-box">
		<input type="submit" id="submit" value="立即注册">
	</div>
</form>

JS里：

//采用jQuery写法
$(function(){
	$("submit").click(function(){
		var u=document.querySelector("uName");
		if(u.validity.valueMissing===true){
			u.setCustom.Validity("昵称不能为空！");
		}else if(u.validity.patternMismatch===true){
			u.setCustom.Validity("昵称必须是6-10位非数字字符！");
		}else{
			u.setCustom.Validity("");
		}
	})
})

你看，上面写了required和pattern，下面就验证非空和正则匹配。

HTML5表单验证新特性

猜你喜欢