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 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 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
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
理解JavaScript中的事件
2006/09/23 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
javascript实现table表格隔行变色的方法
2015/05/13 Javascript
基于javascript制作微信聊天面板
2020/08/09 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Django中的Signal代码详解
2018/02/05 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
什么叫做SQL注入,如何防止
2016/10/04 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
酒店总经理助理职责
2014/02/12 职场文书
我的祖国演讲稿
2014/05/04 职场文书
化学专业自荐信
2014/05/28 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android