Ant Design Vue 添加区分中英文的长度校验功能


Posted in Javascript onJanuary 21, 2020

原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适。所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性。

百度搜了一圈都没找到合适的现成的解决方案,所以自己试着基于v-decorator的自定义校验validator实现了一下,核心代码如下:

校验插件

const validators = {
 /**
 * 可区分全角字符/半角字符的长度校验。
 * @param min
 * @param max
 * @returns {Function}
 */
 length({min=0,max=100000000}){
 return function(rule, value,callback){
  //将一个全角字符替换成两个半角字符,以得到真实长度。
  let realLength = value.replace(/[\u0391-\uFFE5]/g,'aa').length;
  realLength <= max && realLength >= min ? callback() : max<100000000 ? callback('输入长度应在'+min+'到'+max+'个字符之间!') : callback('至少应输入'+min+'个字符!');
 }
 }
}
const install = function(Vue, options) {
 Vue.prototype.validators = validators;
}
export default { install }

main.js 安装插件

Vue.use(validators)

添加校验

<a-form-item label="参数值" :labelCol="labelCol" :wrapperCol="wrapperCol">
   <a-input v-decorator="[ 'paraValue', validatorRules.paraValue]" placeholder="请输入参数值"></a-input>
</a-form-item>

validatorRules:{
  paraValue:{rules: [{validator:this.validators.length({max:50})}]}
  }

若是看不懂校验函数的写法,可先了解一下闭包与高阶函数的概念,这里就不多说啦。

总结

以上所述是小编给大家介绍的Ant Design Vue 添加区分中英文的长度校验功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript引导程序
Oct 26 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
Redis基本知识、安装、部署、配置笔记
Mar 05 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
js核心基础之构造函数constructor用法实例分析
May 11 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 #Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 #Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 #Javascript
Angular单元测试之事件触发的实现
Jan 20 #Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 #Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 #Javascript
阿望教你用vue写扫雷小游戏
Jan 20 #Javascript
You might like
如何使用脚本模仿登陆过程
2006/11/22 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
值得分享和收藏的xmlplus组件学习教程
2017/05/05 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
详解Vue之事件处理
2020/07/10 Javascript
jQuery实现评论模块
2020/08/19 jQuery
微信小程序实现多张图片上传功能
2020/11/18 Javascript
Python help()函数用法详解
2014/03/11 Python
Django Highcharts制作图表
2016/08/27 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
pandas 小数位数 精度的处理方法
2018/06/09 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
美国智能家居专家:tink
2019/06/04 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
早餐连锁店计划书
2014/01/08 职场文书
西式结婚主持词
2014/03/14 职场文书
工地例会施工汇报材料
2014/08/22 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
房屋产权证明书
2015/06/19 职场文书