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 相关文章推荐
中文字符串截取的js函数代码
Apr 17 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
一个可复用的vue分页组件
May 15 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
vue实现简单学生信息管理
May 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
如何开发一个虚拟域名系统
2006/10/09 PHP
php xml文件操作代码(一)
2009/03/20 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
php保存信息到当前Session的方法
2015/03/16 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
VBScript版代码高亮
2006/06/26 Javascript
一个加载js文件的小脚本
2007/06/28 Javascript
jquery 回车事件实现代码
2011/08/23 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
推荐一个自己用的封装好的javascript插件
2015/01/29 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
js遍历map javaScript遍历map的简单实现
2016/08/26 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
Python输出9*9乘法表的方法
2015/05/25 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
python实现求最长回文子串长度
2018/01/22 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
文员的职业生涯规划发展方向
2014/02/08 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
应届生自荐信范文
2014/02/21 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python