<input type='email'/>
现在的网页上，你得看看提交按钮那块的数据格式对不对。这样能保证输入的信息是正确的、完善的，提高数据的精准度！下面咱们聊聊这个，以及它怎么用在网页表单里。
提交按钮与数据格式验证
网页表单中的提交按钮就是把你填写的信息提交出去的一个关键环节。但是，万一你输入的信息不对劲儿，比如格式啊什么的，那就算你点了提交，表单也发不出去。所以这个时候，数据格式验证就显得特别重要不管你是在电脑上还是手机上，只要一按提交，浏览器就会自动检查你填的信息有没有毛病，保证它的格式是对的。
这个玩意儿可不是简单看看你写了啥，而是要按规矩检查你填的对不对！像什么邮箱啊、手机号这些，都有各自的规则。要是你填的跟人家定的格式不太一样，那浏览器就不让你提交了，还给你个提示告诉你哪儿错了，让你好好照着填一次。
input类型与格式验证
你知道吗？HTML里的input标签，它有个type属性，能设定输入框的形式，像text，email，还有电话号码用的tel。但是，要注意，设为tel虽然在手机上弹数字键盘，但可没给数据验证！所以想要保证数据没错儿，咱们就得靠pattern属性制定自己的验证要求咯~
用pattern这玩意儿，能按你的需求来限制用户输入的格式。当你点提交，发现不符合预设的规则，浏览器会拒绝提交，还告诉你哪儿错了！
空数据的验证
你知道么？还有一件事儿得注意，那就是空数据怎么验证。没听说过？其实，只要你在输入框里啥也不填，浏览器可是会直接把这个表单给提交了！原因，就是因为浏览器觉得空白的输入框并不用填写。所以，我们还得在后台做个检查，看看是不是所有的必填项都有填写，这样才能保证信息的准确性~
别忘了，HTML自带的校验功能是通过validationMessage这个属性来检验你输入的内容对不对的。如果它是空的，那就说明过关，不过，要是有值的话，那就得重新检查咯。所以，不管我们用不用自定义校验，都得特别留心空数据这档子事，不然可是会让你的表单提交受罪。
自定义错误信息
var input = document.getElementById('input')
input.validationMessage // =>'请填写此字段'
验证数据格式时，也能添点自己的提醒，告诉用户哪里出错了。用上setCustomValidity这个小功能，把定制好的错误消息传送给validationMessage属性，让用户输入错了的时候，收到更亲切的提示！
这不需要每次输完东西就来验证，只需点了提交按钮后才开始。所以，为了让大家用着舒服点儿，我们利用JavaScript去洞察输入框的键盘操作，在你打字的时候就能马上检查格式对不对，然后根据结果是不是猜对了，改变输入框的样子或者给你个实时提示。
input.setCustomValidity('这个字段必须填上哦');
// 下面这种做法适用于不支持setCustomValidity的浏览器，基本现代浏览器都不支持这样做
input.validationMessage = '这个字段必须填上哦'
提高用户体验
当咱们输错格式时，当然希望马上就能知道哪儿出问题了！所以说，网页设计里头，除了浏览器自带的那些提醒功能，我们还能用CSS风格或者JavaScript互动来给大家更好的使用体验~
就像咱们平时输错了，电脑上就能立马变色或者弹出不对劲儿的图案，这样咱们就能很快发现问题所在了。这种方式就是为了让大家做表单的时候更顺手，少出错，别老是提交不上去。
结语与展望
在网页表单里，按下“提交”按键前进行数据格式验证真是太关键了！它确保了大家输入数字的正确性，拯救了信息的完整，同时也让使用感觉更顺畅，避免了不必要的麻烦。说不定哪天，随着前端科技愈发进步，我们就能看到更聪明、更贴心的数据格式验证方式，给大家带来更方便快捷的网页互动体验！
input.addEventListener('input', function () {
if(this.value.length > 3){ // 判断条件完全自定义
input.setCustomValidity('格式不正确');
}else {
input.setCustomValidity('')
}
});
设计网页表格时，得懂得把所有元素都考虑进去，比如数据类型啦、格式验证啊、还有用户感受这些，这样才让表格好用又实用。当然了，要想满足大家的需求，提高网站的品质和满意度，就得不停地优化和改善表格设计！
你对网页表单的格式验证有何看法？你认为如何提高用户体验？
评论0