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 DOM 学习第七章 表单的扩展
Feb 19 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 Javascript
JavaScript中string对象
Jun 12 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
php实现paypal 授权登录
2015/05/28 PHP
Smarty变量用法详解
2016/05/11 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
python发送邮件实例分享
2017/07/28 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
作弊检讨书1000字
2014/02/01 职场文书
女生节标语
2014/06/26 职场文书
个人主要事迹材料
2014/08/26 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
mysql联合索引的使用规则
2021/06/23 MySQL
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android