×

Web前端vue开发:在表单验证中输入姓名时引发的“奇案”

作者:Web前端之家2020.03.27来源:Web前端之家浏览:963评论:0
关键词:vuejsinput表单
微信公众号

微信公众号

500.jpg

近期一直再忙于vue.js的项目开发,尤其是表单功能;今晚想抽出一个小技术点来说说。比如:输入姓名的表单验证系列问题。

对于姓名的验证,我们会想到几点:

1、用户只能输入中文

2、如果用户输入了非中文如何处理

3、用户从表单外复制非中文进来如何处理

4、限制输入的字数

接下来我们以一个实例来说明下,如何去寻找解决方法,

输入姓名的表单验证系列问题

image.png

这是一个存款案例,用银行转账的时候要求把中文姓名提交给后台去,然后把姓名的参数给第三方业务接口用。我自己做了2个方案:

方案一

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-\u9FA5]/g, ''); // 清除除了中文以外的输入的字符
   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-\u9FA5]/g, '')
},
checkStart(){
    this.checkInterval=setInterval(this.checkChinese,100)
},
checkEnd(){
    clearInterval(this.checkInterval)
    console.log('chineseName:'+this.chineseName);
}

checkStart和checkEnd分别定义输入和离开时的状态的方法。

主要逻辑:

获取焦点时设置定时器,开始轮询验证,失去焦点后清除定时器。

设置的是0.1秒验证一次,每次验证将输入框内容不符合正则的字符去除。验证间隔可以自己设置更短。获取焦点时开始验证,失去焦点后停止验证。

看上去是不是感觉思维更加缜密了,当然看归看,我们得去试下才行,这里就不弄DEMO了。

总结下优点:

此方法有着极高的兼容性,通用性,textarea也适用。

适用事件为经典事件,几乎所有框架,相关组件都可以使用,基本能兼容各种浏览器,设备。

差点遗漏了一点,限制输入文字的长度,我觉得这个非常简单,用length方法即可。

OK,已经有点晚了,就说这么多吧,最后简单总结下吧。

总结

上面列举的两种方案,第一种是我最开始使用的,第二种方案是从网上搜集到的,说实话,有时候只有对比才有“伤害”,跟我们平时购物一样,你没用过,你根本不知道优劣之分。

话说回来,表单验证方法还有很多,比如插件和框架提供的方法等等,如果更好的方法都可以分享出来,留言或者QQ,不吝赐教。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.miarww.com.cn/article/vue20200326.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright ? 2020 Web前端之家(www.miarww.com.cn) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.0 Valyria

时时彩平台哪个好 云南十一选五任选走势图 怎样玩股票入门基础 广东快乐十分计划任三 东京1.5分彩开奖计划 一分快三app下载 股票推荐608667.com 上海快3官网 下周股票趋势 安徽十一选五走势基本走势 鼎顺配资 吉林11选5中十万 十一选五开奖结果陕西一定牛 棋牌游戏app开发出售 浙江6+1体彩走势图 内蒙古快三今日预测 10倍杠杆配资