HTML5可谓是个宝藏，尤其在处理表单这事儿上，好用得很呐！比如说那个pattern属性，真挺实用的。它能帮咱们查查表单中的数字有没有问题，比如包含空白字符啥的。一旦检测到有误，立马弹出提示框，还把表单给拦截了，这就杜绝了错误的用户注册！除了这个，还有个小彩蛋，就是可以自定义提示信息！只需通过setCustomValidity方法，就能随心所欲地修改提示框的内容，让填写过程更加顺手舒服~
正则表达式验证
HTML5有个模式属性，你能设置这个属性来限制电话号码只能是中国大陆的。这样，用户哪怕输入错误或者格式不对，也提交不出去。这可让大家输入信息更标准，更准确！
不填写内容的话，正则验证可是悠哉游哉！为了让大家都输入差不多再检查，除了写个正则表达式，还要加上 required 属性噢。不过要注意，可别被网页上那些直接的提示信息吓倒，我们这里有 setCustomValidity 的神奇帮手，想怎么编就怎么编提示信息！
优化用户体验
别急有些浏览器的校验提示可能有点儿难懂？别急，其实直接操作就好！你只需用 setCustomValidity 这个办法，把提示信息弄得简短易懂点。这么一搞，用户立马明白哪里出错了，然后马上搞定~体验感飙升
简单来说，就是当你把表格写完了，要提交时，发现不行了，那肯定是因为还没过检验。别着急，在你提交之前，咱们还会再仔细检查每个栏位的信息，保证没错儿再发出去。要是你还是有些担心或者想再查看下填写情况，那么你完全可以自己试一试用checkValidity方法来检验一下，这样对于咱们的开发人员来说，也是很不错的选择，他们能够有更多的余地和灵活性！
动态设置提示信息
text.oninput=function(){
text.setCustomValidity("");
};
text.oninvalid=function(){
text.setCustomValidity("请不要输入火星的手机号好吗？");
};
提示总是乱变？想根据实际输入来微调提示消息？比如输入是空的会提醒”不能空着哦”；太长的话就说”有点太长了”；输入不是数字？那就该知道”请输入数字呀”。设置好这种校验功能只需要使用程序来搞定，然后时不时调用下表单元素的setCustomValidity方法轻松搞定！这样搞既能使用起来更加踏实放心，又能更快更好地填写表格哟~
HTML5表单验证API设计缺陷
HTML5的表单验证功能大家觉得还好？不过有人说API有点不太好用。平时用还行，就是有时候怪别扭的。比如手机屏幕小的，用JavaScript验证，一下子弹出好多窗口，看都看晕了。
手机端HTML5属性验证示例
手机网页编程时，利用HTML5的属性检测功能，能自动检查输入值是否正确，且避免用户频繁跳出页面。就比如说调整input标签的type和pattern属性，既能准确验证数据又不会影响用户使用体验，从而使网页互动更加顺畅。
其实，用HTML 5的表单校验功能开发简直就是方便到家了，既能保证输入数据的准确无误，还让客户用着舒服。这样，网页与客户之间的互动，还有客户满意度都得会高不少！
// 主要用了HTML的一下属性 // 1.placeholder 提供可描述输入字段预期值的提示信息。 该提示会在输入字段为空时显示,并会在字段获 //得焦点时消失 //2.required 属性规定必需在提交之前填写输入字段 //3.pattern 是正则表达式, 里面可以直接填写正则表达式
。
评论0