【JS基础】表单验证

JavaScript 表单 | 菜鸟教程
https://www.runoob.com/js/js-validation.html
JavaScript 表单验证 | 菜鸟教程
https://www.runoob.com/js/js-form-validation.html
JavaScript 验证 API | 菜鸟教程
https://www.runoob.com/js/js-validation-api.html

引文说明：第一篇其实是表单验证2类方式的简介，名字叫“表单”其实不太合理；第二篇是JS自定义判断方式；第三篇是HTML5新增的约束验证方式。

元素自带约束属性的使用

表单具体应该是input元素有对输入值的约束性的元素：disabled、max、min、pattern、type、required。

如果表单元素有约束性属性被设置，那么就按照这个对象的checkValidity()方法来判断：

checkValidity()方法：符合true，不符合false，

对象.checkValidity()== true //说明符合，
对象.checkValidity()== false //不符合

上面checkValidity()方法不够具体，用if再去判断具体情况比较麻烦。还好有现成的validity属性（值也是true和false）提供具体的判断，并且有对应的validationMessage属性值（string类型的默认提示信息）可以直接使用：

对象.validity.rangeOverflow == true//为真时，表明大于max设定的最大值
//这时对应的ValidationMessage值
对象.validationMessage//值：值必须小于或等于 300。（注：300是HTML元素max属性设定值）

validity属性和validationMessage的默认值（根据系统语言而不同），列表如下：

HTML元素约束属性	validity属性	validationMessage中文值	validationMessage英文值
required：	valueMissing	请填写此字段。	Please fill out this field.
type="number"：	typeMismatch	number时其他字符无法输入测不了，email时错误信息为：	Please include an ‘@’ in the email address. ‘default’ is missing an ‘@’.
min="100"：	rangeUnderflow	值必须大于或等于 100。	Value must be greater than or equal to 100.
max="300"：	rangeOverflow	值必须小于或等于 300。	Value must be less than or equal to 300.
step="3"：	stepMismatch	适用于number、range、date、datetime、datetime-local、month、time 和 week	Please enter a valid value. The two nearest valid values are 100 and 103.
pattern="[A-Za-z]{3}"：	patternMismatch	使用正则表达式。	Please match the requested format.
maxlenth="300"：	tooLong	type是文本时可用（暂定）	超出长度无法输入，暂未测试tooLong和Message的值
如果都符合：	valid	空字符	效果等同”
这个是特例：	customError	自定义错误提示后，customError值一直是false	下面会讲

补记：如果type是number，max或min、step都设置，如果都有错，那么优先显示max或min的错误提示。其他的优先级暂未测试。

如果想自定义错误提示信息，可以使用setCustomValidity()方法：

if(rangeOverflow){
setCustomValidity('超过许愿数量，想得太美！')
}

想查看一个元素是否可以应用“约束验证”，可以查看其willValidate属性。以下定义和示例来自：

HTMLObjectElement.willValidate – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/willValidate

The willValidate read-only property of the HTMLObjectElement interface returns a boolean value that indicates whether the element is a candidate for constraint validation. Always false for HTMLObjectElement objects.

var Boolean = HTMLObjectElement.willValidate;

那么，我感觉挺奇怪，这里似乎很复杂，有重复估计是给想自己写错误提示的人提供方便吧，免去自己写代码判断情况，就通过validity.属性的方式给概括了。

//给setCustomValidity()参数为'',是规定的一个取消自定义的方式；
//之所以先开头取消自定义，是因为点击第二次按钮的时候，checkValidity()总会给出false值；
//checkValidity()之前使用setCustomValidity('XXX')，会干扰checkValidity()判断，总会返回false；第二次点击按钮重复执行函数，就相当于在第二次checkValidity()之前使用了setCustomValidity()，除非关闭网页

obj.setCustomValidity('')
if (obj.checkValidity()){
    alert('许愿数量OK，马上实现！')
    else {
        if(obj.validity.rangeOverflow){
        obj.setCustomValidity('超过许愿数量，想得太美！')}
        else if(obj.validity.valueMissing){
        obj.setCustomValidity('数量为0，为啥不许愿呢？')}
        //.............
        alert(obj.validationMessage)
}

JS自定义约束

通过获取表单元素的值，通过JS判断输入值是否符合要求。
下面的网站中有必填和Email格式验证2个例子。
JavaScript 表单验证 | 菜鸟教程
https://www.runoob.com/js/js-form-validation.html

---