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 日期时间函数(经典+完善+实用)
May 27 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
详解Js模块化的作用原理和方案
Apr 29 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
[00:57]林俊杰助阵DOTA2亚洲邀请赛
2015/01/28 DOTA
Python读写ini文件的方法
2015/05/28 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
python文字转语音的实例代码分析
2019/11/12 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
python 绘制国旗的示例
2020/09/27 Python
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
一套.net面试题及答案
2016/11/02 面试题
幼儿园消防演练方案
2014/02/13 职场文书
电工技术比武方案
2014/05/11 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
生产实习心得体会范文
2016/01/22 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
SSM项目使用拦截器实现登录验证功能
2022/01/22 Java/Android