最近一直忙着vuee.js项目开发，特别是表单功能；今晚我想提出一个小技术点。例如：输入名称的表格验证系列问题。
对于名称验证，我们会想到几点:
1、用户只能输入中文
2、如果用户输入非中文怎么办？
3、用户如何从表单外复制非中文？
4、限制输入的字数
接下来，让我们以一个例子来解释如何找到解决方案，
输入姓名表验证系列问题
这是一个存款案例。银行转账时，要求将中文姓名提交后台，然后将姓名参数提交给第三方业务界面。我自己制定了两个计划：
方案一
HTML代码：
<Input v-model="name" placeholder=“请输入真实姓名(中文) style="width:auto;" clearable @keyup.native="inputChange($event)" @keydown.native="inputChange($event)"/>
这里不多说html，很简单，我们主要介绍JS是如何操作的。
inputChange(e) { const o = e.target; o.value = o.value.replace(/\u4E00-\u9FA5g, ''); // 清除中文以外的输入字符 this.name = o.value; },
上述方法似乎没有问题。我们定义了点击和松开的两个状态，然后用正则中文处理input绑定v-model的name值。不知道大家有没有想到问题？
事实上，这种方法对PC来说是可以的。如果是移动终端，可以试试，发现问题就来了。点击时可能没有反应，特别是对于ios系统，各种bug都来了。
总结缺点：
keyup动作验证:移动终端兼容性差
clipboard粘贴时验证：浏览器安全策略限制读取设备粘贴板，功能有限。
Input动作验证:IE不兼容，需要浏览器查询。对组件不友好，没有达到要求效果。
方案二
那么我们如何优化呢？让它也适用于移动终端，所以我们找到了另一种优化方法，胡说八道，代码：
HTML代码：
<!-- chinese name --> <div class="pay-chinesename" v-if="showChineseName"> <input type="text" class="chinaName" placeholder=“请填写真实姓名(中文) @focus="checkStart" @blur="checkEnd" v-model="chineseName" name="chineseName" /> </div>
我们在这里发现，我们用focus和blur取代了点击和松开的状态，其他的基本相同。当然，JS做了不同的处理。
// chinsename check checkChinese(){ this.chineseName=this.chineseName.replace(/\u4E00-\u9FA5g, '') }, checkStart(){ this.checkInterval=setInterval(this.checkChinese,100) }, checkEnd(){ clearInterval(this.checkInterval) console.log('chineseName:' this.chineseName); }
checkstart和checkend分别定义输入和离开时的状态。
主要逻辑：
获取焦点时设置定时器，开始轮询验证，失去焦点后清除定时器。
设置为0.1秒验证一次，每次验证都会去除输入框内容不符合正则的字符。验证间隔可以自己设置更短。获取焦点时开始验证，失去焦点后停止验证。
你觉得思维更细致吗？当然，我们必须试试。我们不会在这里得到DEMO。
总结优点：
这种方法兼容性高，通用性强，textarea也适用。
经典事件适用于几乎所有框架和相关组件，基本上可以与各种浏览器和设备兼容。
几乎遗漏了一点，限制了输入文本的长度，我认为这很简单，使用length方法。
OK，已经有点晚了，就说这么多吧，最后简单总结一下。
总结
上面列出的两个方案，第一个是我第一次使用的，第二个方案是从互联网上收集的，说实话，有时只有比较才会有“伤害”，就像我们通常的购物一样，你没有使用它，你不知道优缺点。
评论0