文章目录
前言
涉及内容:
HTML5约束验证的<input>
部分。
技能掌握:
- HTML
- 部分HTML表单属性
- 部分HTML事件
- 部分DOM方法
- …
- JavaScript
console
对象if/else
语句- …
前提概念
表单约束
是什么?
对用户输入的表单数据进行限制
为什么?
- 更好的获取有意义的用户数据
- 为用户提高更佳的浏览体验
怎么办?
-
内在约束(intrinsic constraint)即,为
<input>
标签的type
属性选择合适的值。如:<!-- 将type属性设置为email,就会自动创建一个约束 --> <input type="email">
-
基本约束(basic constraint)即,设置具有限制性的属性值。如:
<!-- 将此设置为必填项 --> <input type="email" required> <!--或 <input type="email" required="required"> -->
-
友好的提示表单设置的约束。如:
<input type="email" placeholder="请输入正确的邮箱地址哦">
表单数据校验
是什么?
校验用户输入的表单数据是否符合网页的预期。
为什么?
- 保证网站后续应用程序的正常运行
- 对用户数据进行保护
- 保护网站的安全
怎么办?
-
客户端校验
- JavaScript校验(即,程序员自定义校验方式)
- HTML5内置表单校验(即,浏览器根据HTML5规范所内置的API)
-
服务端校验
… …
比较:(JavaScript校验 VS HTML5内置校验)
- JavaScript校验灵活性更佳
- HTML5内置校验性能更佳
HTML5内置表单校验
是什么?
HTML5中对用户的输入数据校验,使用表单元素的校验属性来实现。(可以不用写任何脚本代码)
为什么?
- 提升网站的性能,提高用户体验
- 一定程度上保证用户的数据安全以及网站的安全
- 提高表单的可用性
怎么办?
- 约束验证
约束验证(Constraint validation)
概念
对表单以及表单中每个控件设置更复杂的限制(约束),并验证用户输入控件的数据是否符合限制;同时,提供给用户更清晰的验证失败提示(与浏览器默认提示对比)。
约束 + 验证 + 提示
方式
注:下列内容主要涉及第一种方式(因为示例的需要所有会使用到JavaScript),且只对<input>
标签的操作。
- HTML5自带的关于表单验证的接口
- JavaScript结合约束验证API进行复杂的约束,即使用表单的事件触发JavaScript
- 约束验证的可视化提示,即使用CSS对用户进行反馈操作
基本原理
注:此处更多涉及如何操作表单DOM来实现约束验证。
- 操作表单DOM
- 设置表单自身
查看约束
注: 此处以<input>
标签为例,因此使用的是,表单DOM中的HTMLInputElement
接口所拥有的属性和方法(下列的属性和方法并不是<input>
标签独有的),包括:validity
、validationMessage
、willValidate
、setCustomValidity()
、checkValidity()
。
validity
属性
-
作用
表示
<input>
标签可以拥有的约束,且这些约束此时的有效性情况。 -
状态
只读
-
返回值
ValidityState
[object | 只读]属性名 属性值 描述 badInput
Boolean
true
:用户输入了浏览器无法转换的值;false
:满足约束customError
Boolean
true
:使用setCustomValidity ()
方法设置自定义提示信息(信息不是空字符串);false
:没有使用setCustomValidity ()
方法设置自定义提示信息patternMismatch
Boolean
true
:输入值不符合pattern
属性值的规定;false
:符合pattern
属性值的规定rangeOverflow
Boolean
true
:输入值大于max
属性值;false
:小于或等于max
属性值rangUnderflow
Boolean
true
:输入值小于min
属性值;false
:大于或等于min
属性值stepMismatch
Boolean
true
:输入值不符合step
属性值的规定;false
:符合step
属性值的规定(step
表示步长)tooLong
Boolean
true
:输入值大于maxlength
属性值;false
:小于或等于maxlength
属性值tooShort
Boolean
true
:输入值小于minlength
属性值;false
:大于或等于minlength
属性值typeMismatch
Boolean
true
:输入值不符合type
属性值的规定;false
:符合type
属性值的规定valid
Boolean
true
:输入值符合所有属性的规定;false
:输入值不符合任意一个属性的规定valueMissing
Boolean
true
:不符合required
属性的规定(即,没有输入值);false
:符合required
属性的规定 -
语法
HTMLInputElement.validity
-
示例
-
badInput
为true
,即,用户输入了浏览器无法转换的值。<!-- 此处添加一个onblur事件,方便进行测试 --> <!-- 此处若输入“3.1415926-99999999”时,badInput将会返回true --> <form> <label>年龄</label> <input type="number" id="age" onblur="checkBlur(this)" /> <input type="submit" value="提交"> </form>
var test = document.getElementById("age"); console.log(test.validity); //查看有效性状态 //查看badInput属性值 function checkBlur(test) { if (test.validity.badInput) { console.log("Bad input detected!检测到错误的输入!"); } else { console.log("Content of input OK!输入无误!"); } }
-
customError
为true
,即,使用setCustomValidity ()
方法设置不满足约束时的自定义提示信息(信息建议不是空字符串)<!-- 此处添加一个onblur事件,方便进行测试 --> <!-- 此处继续输入“3.1415926-99999999”,使badInput返回true,来查看自定义的信息 --> <form> <label>年龄</label> <input type="number" id="age" onblur="checkBlur(this)" /> <input type="submit" value="提交"> </form>
var test = document.getElementById("age"); var validityState = test.validity; console.log(validityState); //查看有效性状态 function checkBlur(test) { if (validityState.badInput) { test.setCustomValidity("请输入正确的年龄!");//设置自定义的错误提示信息 console.log("Bad input detected!检测到错误的输入!");//用户输入错误时,控制台的提示 console.log(test.validationMessage);//在控制台查看,错误提示信息 console.log(validityState.customError);//查看customError属性值 } else { console.log("Content of input OK!输入无误!"); } test.reportValidity();//将错误提示信息呈现到页面,用来提醒用户 }
注:
validationMessage
表示用户输入不符合约束时,浏览器的错误提示信息。详情见下文的validationMessage
属性。reportValidity()
表示将浏览器的错误提示信息显示给用户。详情见下文的reportValidity()
方法。
-
patternMismatch
为true
,即,不符合正则表达式的要求。<!-- 此处添加一个onblur事件,方便进行测试 --> <!-- 此处输入“1”,使 patternMismatch 返回true --> <form> <label>电话</label> <input type="tel" id="tel" onblur="checkBlur(this)" pattern="[0-9]{11}"/> <input type
-