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 相关文章推荐
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
js创建元素(节点)示例
Jan 02 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
electron踩坑之remote of undefined的解决
Oct 06 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
apache中为php 设置虚拟目录
2014/12/17 PHP
2014最热门的24个php类库汇总
2014/12/18 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
php使用Jpgraph创建柱状图展示年度收支表效果示例
2017/02/15 PHP
jQuery 动画基础教程
2008/12/25 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
浅析javascript中函数声明和函数表达式的区别
2015/02/15 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
清除输入框内的空格
2016/12/21 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
vue瀑布流组件实现上拉加载更多
2020/03/10 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
python简单商城购物车实例代码
2018/03/15 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
Python列表(List)知识点总结
2019/02/18 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
挂职思想汇报
2013/12/31 职场文书
团日活动策划书
2014/02/01 职场文书
个人课题方案
2014/05/08 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
负责培养人意见
2015/06/05 职场文书
公司回复函格式
2015/07/14 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
JavaScript实现复选框全选功能
2021/04/11 Javascript
Go语言基础map用法及示例详解
2021/11/17 Golang
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python