JavaScript 用HTML5约束验证API做表单验证

一、验证属性与通过与否

以下为在表单元素上的可用属性:

required<boolean> 必填字段,接受布尔值,默认false
pattern<string> 接受正则,用户输入的文本必须满足该正则

表单元素对象上有checkValidity()方法,其返回布尔值,可以由表单子元素调用以验证单个子元素值是否通过验证:

if(document.form[0].element[0].checkValidity()) {}

也支持由表单调用验证全表单:

 if(document.form[0].checkValidity()) {}

该方法只返回布尔值以反映验证通过与否.


二、获取验证失败的原因

那么如何得知不通过的原因?
validity属性反应不通过的原因,该属性也由表单元素对象暴露.

if(formEle.validity) {
  console.log(validity);
}

该属性可能的值及值的意义如下:

customError: 若设置了setCustomValidity()则返回truefalse
pattenMismatch: 字段值不符合pattern正则的要求
rangeOverflow: 字段值大于max值返回true.
rangeUnderflow: 字段值小于min值返回true
stepMismatch: 字段值与min、 max、step值不相符则返true
toolong: 字段值长度超过maxlength值返true
valid: 如其他属性值都为falsetrue
valueMissing: 有required必填项未填返true
typeMismatch: 返回true表示字段值并非email或url属性要求的格式

例:

if(formEle.validity.valueMissing) {
  console.log("required value missing.");
}

END

如有疏漏,请为我指正,谢谢.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值