前两天收到一个请求：需要验证手机号、身份证、验证码，验证规则包括长度和内容。有很多想法，但我不知道它们是否可行。让我们今天把它们整理一下。我先说说你的想法吧。html标签属性typepatternmin,maxminlength,maxlengthjs事件监听值获取值（vue使用v-model）@input监听变化接下来就是大家期待的理想。理想是丰满的，现实是很骨感的联系。htmlinputtype的tag属性type是用来限制输入类型的，这里只介绍我们可能有的。每种类型往往都有一些特点，让我们来看看。date用于输入日期（年、月、日，不包括时间）的控件。当支持的浏览器处于活动状态时，打开年、月和日的日期选择器或数字轮。datetime-local输入日期和时间的控件，不包括时区。当支持的浏览器处于活动状态时，打开年、月和日的日期选择器或数字轮。用于编辑电子邮件地址的电子邮件字段。类似于文本输入，但在支持的浏览器和具有动态键盘的设备上具有确认参数和相应的键盘。number用于输入数字的控件。如果支持，将显示滚动按钮并提供默认验证（即只能输入数字）。数字小键盘显示在带有动态键盘的设备上。password一个单行文本字段，其值将被屏蔽。如果网站不安全，用户会收到警告。search用于搜索字符串的单行文本区域。输入文本中的换行符会自动去除。支持的浏览器中可能有清除整个区域的删除按钮。带有动态键盘的设备上的输入图标将变为搜索图标。tel输入电话号码的控件。电话号码键盘显示在带有动态键盘的设备上。文本默认值。对于单行文本区域，输入中的换行符将被自动删除。url用于输入URL的控件。类似于文本输入，但在支持动态键盘的设备上具有验证参数和相应的键盘。可以看到支持最多的功能是动态键盘和验证，正好是我们需要的。pattern、min、max、minlength、maxlength这几个属性其实是特定于特定类型的。（没想到这个，好吧，继续往下看）测试地址：https://www.lilnong.top/static/html/sf-1190000037538101-html-input-attribute-type-pattern-min-max-minlength-maxlength.htmlpattern只支持密码、文本、电话类型。用于检查控件值的正则表达式。pattern必须匹配整个值，而不仅仅是某个子集。min和max只支持数字类型。该属性规定了用户可以输入的值minlength和maxlength（最小值和最大值）（数字或日期和时间）。仅支持的类型是密码、搜索、电话、文本、url。该属性表示用户可以输入的字符数（最小和最大）（按照Unicode编码方式计算）。可以看到如何获取验证状态。上面有一些验证相关的内容。我们如何使用它？cssmethod::valid,:invalidhtmlmethod:表单提交时的js方法:ValidityState获取输入内容似乎没有比这更简单的了，我们每天都在用。Native:el.valueVue:v-model但是事情没有那么简单，如果使用html校验，如果校验失败，测试type="number"时得到的是空字符串，多余的.type="number"cannotbeobtained”，异常值获取不到。通过validationMessage和validity获取当前异常状态。有问题也可以加我的微信前端交流群。参考MDN:Input(forminput)元素有效性状态
