Ant Design Vue 添加区分中英文的长度校验

最新推荐文章于 2024-07-04 15:38:08 发布

fly_baizhi

最新推荐文章于 2024-07-04 15:38:08 发布

阅读量3.7k

点赞数 1

分类专栏：前端基础文章标签： vue js vue.js es6 前端

本文链接：https://blog.csdn.net/weixin_42808551/article/details/104032598

版权

本文介绍如何在Ant Design Vue中实现区分中英文的长度校验。由于默认的`maxLength`属性不考虑全角/半角字符差异，作者通过自定义Vue装饰器的验证器（validator）来解决这一问题，提供了可重用的校验方案。核心代码已在文中给出，读者需了解闭包和高阶函数以理解实现细节。

摘要由CSDN通过智能技术生成

原本的maxLength属性是不区分全角/半角字符的，对于一些可中英文混合输入地方而言不太合适。所以想找一个可区分全角/半角字符的校验，而且要保证一定的可重用性。
百度搜了一圈都没找到合适的现成的解决方案，所以自己试着基于v-decorator的自定义校验validator实现了一下，核心代码如下：

校验插件

const validators = {
   
  /**
   * 可区分全角字符/半角字符的长度校验。
   * @param min
   * @param max
   * @returns {Function}
   */
  length({
   min=0,max=100000000}){
   
    return function(rule, value,callback){