HTML5中form表单验证

自定义错误

首先，HTML5的表单中有很多错误提示消息,但这些错误提示信息是系统写死的。


有时候HTML5自带的错误提示消息，不能详细的描述错误，这时候就要抛出一个自定义的错误提醒。

如何自定义错误信息

首先我们要了解HTML5为所有表单元素添加了一个JS属性：input.validity(有效性)

validity属性

validity属性提供了关于表单字段的一组信息，值是布尔值(true/false)。

返回的对象(validityState)包含以下属性：

• badInput: false
  # 输入的value（值）为number（数字）时返回false

• customError: true
  # 是否存在自定义错误，存在自定义错误返回true

• patternMismatch: false
  # 输入的value(值)与pattern中的正则表达式是否匹配，不匹配返回false

• rangeOverflow: false
  # 输入的value（值）有max属性的约束，且输入的value大于max时，就返回true

• rangeUnderflow: false
  # 输入的value（值）有min属性的约束，且输入的value大于min时，就返回true

• stepMismatch: false
  # 用于判断输入的值符不符合step特性所推算出的规则,限制了输入的值必须是最小值与step特性值得倍数之和.
  例如： min=“2” max=“10” step=“2” 然后(value - min) % 2 != 0则返回true否则返回false

• tooLong: false
  # 输入的value是否超过了元素maxlength属性所建立的最大单元长度，不超过返回false

• tooShort: false
  # 输入的value是否小于元素minlength属性所建立的最小单元长度，不小于返回false

• typeMismatch: false
  # 输入的值是否符合元素type属性设置的约束，如果该type属性需要特定的字符串，例如 email或url类型，并且该值不符合该类型设置的约束，则返回true

• valid: false
  # 当字段通过验证的时候，是true

• valueMissing: true
  # 当必填的字段是空的时候，这个是true

我们怎么样自定义错误消息？

设置自定义错误消息的方法：
input.setCustomValidity(‘错误提示消息’);
//这个相当于将input.validity.customError:true

取消自定义错误消息的方法：
input.setCustomValidity("");
//这个相当于将input.validity.customError:false

<form action="#" method="post">
	<input type="text" id="name" pattern="^\d{3,8}$" required="required" />
	<input type="submit" id="button" value="提交" />
</form>
<script>
	window.onload=function(){
		var name=document.getElementById("name");
		var button=document.getElementById("button");
		button.onclick=function(){
			var v = name.validity;
			console.dir(v);
			if(v.valueMissing == true){
				name.setCustomValidity("字段不能为空！")
			}else{
				if(v.patternMismatch == true){
					name.setCustomValidity("请输入3-8位数字！");
				}else{
					name.setCustomValidity("");
				}
			}
		}
	}
</script>

注意：没有input.setCustomValidity("");表单无法提交！

效果展示

在浏览器中打开效果是这样的：