当提交时，如果Input内容为空，那么浏览器会提示‘请填写此字段’，我们可以在控制台把这句话打印出来：
| var input = document.getElementById('input') input.validationMessage // =>'请填写此字段' |
如果想修改其中的内容，可以调用setCustomValidity接口改变validationMessage的值
| input.setCustomValidity('这个字段必须填上哦'); // 下面这种做法适用于不支持setCustomValidity的浏览器，基本现代浏览器都不支持这样做 input.validationMessage = '这个字段必须填上哦' |
注意，像required这样的HTML原生验证，虽然能改变其中信息，但无法把信息置为空字串，原因下面会讲到。
原理
HTML表单验证系统通过validationMessage属性检测该文本框的数据是否通过验证，如果其值为空字串，则表示通过了验证，否则，表示未通过，浏览器会把其值作为错误信息提示给用户。所以在原生验证时，用户无法把validationMessage的值设置为空字符串。
约束验证API的简单实例
约束验证API是在原生方法之上更灵活的表达方式，你可以自己设置数据是否通过，而不借助于正则表达式。原理很简单，通过if判断，如果数据格式使你满意，那么你就调用setCustomValidity使validationMessage的值为空，否则，你就调用setCustomValidity传入错误信息：
| input.addEventListener('input', function () { if(this.value.length > 3){ // 判断条件完全自定义 input.setCustomValidity('格式不正确'); }else { input.setCustomValidity('') } }); |
每次键盘输入，代码都会判断格式是否正确，然后调用setCustomValidity设置validationMessage的值。不要妄想每按下键浏览器都会提示你结果是否正确，浏览器只有在点击提交按钮的时候才会提示validationMessage里的值（如果有的话）。
如果你还没有走思的话，一定会问，既然这样，为什么要为input绑定键盘事件，每输入一下都要进行判断呢？直接为表单绑定提交事件，在提交时再判断多好，别急，这么做是有好处的。
随着输入判断格式与样式
作为用户，我们当然想在得知我输入了错误的格式之后，文本框变红（或者有别的提示）。而在我每次输入一个字符，如果对了，文本框就恢复正常。我们可以使用CSS伪类来实现这个功能：
| input:required { background-color: #FFE14D; } /*这个伪类通过validationMessage属性进行判断*/ input:invalid { border: 2px solid red; } |
上面的required伪类会给所以必填但值空的input提供一个黄色的背景色，而下面的invalid伪类则会为所有未通过验证的input添加一个2px的红边边。我们现在给我们的Input框加上input类即可。
