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

原本的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 添加区分中英文的长度校验功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • ant-design-vue 实现表格内部字段验证功能

    表格内 column 可输入的需求还是很常见的,尤其有一些业务场景就是表单内部有一个表格,然后表格的某些列是个进行输入的,就像下面这样 下单数量 内容不能为空 下单数量 必须输入正整数 翻阅 ant-design-vue 官网并没有发现说表单内表格字段验证的方案,但是有一个 自行处理表单数据 的介绍 那我们是不是可以参考这个方案去实现咱自己的业务需求呢,下面就开始说一下实现方案 <a-table :columns="columns" bordered :rowKey="

  • ant-design-vue 快速避坑指南(推荐)

    ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,它其实是Ant Design的Vue实现,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致. 用下来发现它的确称得上为数不多的完整的VUE组件库与开发方案集成项目. 本文主要目的是总结一些开发过程中比较耗时间去查找,文档中没有具体说明的常见问题,同时希望能给新上手此框架的同学提供一些参考作用. 1.Table对接后台返回数据 针对Table数据格式与后他接口返回数据格

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

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

    原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决方案,所以自己试着基于v-decorator的自定义校验validator实现了一下,核心代码如下: 校验插件 const validators = { /** * 可区分全角字符/半角字符的长度校验. * @param min * @param max * @returns {Function}

  • Ant design vue table 单击行选中 勾选checkbox教程

    最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table 单击行选中 勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th

  • ant design vue datepicker日期选择器中文化操作

    按照ant design vue官方说明,使用日期选择器需要在入口文件(main.js)全局设置语言: // 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); <a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')&q

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • 解决ant design vue 表格a-table二次封装,slots渲染的问题

    目的就是对a-table进行二次封装,但是在如何显示a-table的slot时遇到了问题,原本想法是在a-table内把$slots都渲染,期望在使用该组件时能正确渲染,然而...并不会正确渲染 <template> <a-table bordered :scroll="{ x: scrollX, y: 600 }" v-bind="{...$attrs, ...$props, ...{dataSource: body, columns: header}}&

  • ant design vue导航菜单与路由配置操作

    此功能包含: 1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单与路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inlineCollapsed="$store.state.isCollapse" @click='select

  • Ant design vue中的联动选择取消操作

    项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag

  • Vue3（二）集成Ant Design Vue

    Vue3（二）集成Ant Design Vue

    目录 一.集成Ant Design Vue 二.组件的使用 1.完整引用 2.组件引用 三.组件使用示例 1.我们在home主页做修改 2.重新启动服务查看效果 四.总结 上一篇文章我们介绍了利用Vue3 创建Vue CLI 项目(一)接下来承接上一篇文章的基础继续展开下面文章的内容 一.集成Ant Design Vue SQL: npm install ant-design-vue@2.0.0-rc.3 --save 兼容性: Ant Design Vue 2.x 支持所有的现代浏览器. 如果

  • ant design vue的form表单取值方法

    ant design vue的form表单取值方法

    目录 ant design vue的form表单取值 官方中有以下两种取值方式 ant design of vue 学习之表单form v-decorator(表单验证,内置绑定,初始值) 数据获取与填充 表单实例 ant design vue的form表单取值 官方中有以下两种取值方式 因为不是很熟悉,所以还是查了文档找了一下使用方式,刚开始查到的文档是这样写的 然后返回了undefined,后来又查询了一些文档,发现我多加了一个props属性,然后使用第二个方法成功了,代码如下: ant d

  • Ant Design Vue中的table与pagination的联合使用方式

    目录 Ant Design Vue中table与pagination联合使用 ant.design.vue中table的使用说明 table的创建 table之columns table之dataSource table之loading table之scroll table之rowKey table之rowSelection table之customRow table之change Ant Design Vue中table与pagination联合使用 表格table使用链接:ant desig

随机推荐