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 相关文章推荐
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
requireJS使用指南
Apr 27 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
Vue三层嵌套路由的示例代码
May 05 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
vue中的面包屑导航组件实例代码
Jul 01 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
在webstorm中配置less的方法详解
Sep 25 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
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
javascript Excel操作知识点
2009/04/24 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
JavaScript定义类或函数的几种方式小结
2011/01/09 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
python不换行之end=与逗号的意思及用途
2017/11/21 Python
python命令行工具Click快速掌握
2019/07/04 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
Python 如何创建一个线程池
2020/07/28 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
蜜蜂引路教学反思
2014/02/04 职场文书
《观舞记》教学反思
2014/04/16 职场文书
优秀教师单行材料
2014/12/16 职场文书
项目安全员岗位职责
2015/02/15 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
校运会班级霸气口号
2015/12/24 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers