Ant Design Vue 添加区分中英文的长度校验功能
更新时间：2020年4月2日 10:13 点击：986
原本的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 添加区分中英文的长度校验功能，希望对大家有所帮助！
相关文章
- 下面小编就为大家分享一篇c#实现获取字符串阵列中元素最长或最短的长度方法，具有很好的参考价值，希望对大家有所帮助...2020-06-25
- 这篇文章主要为大家详细介绍了WPF TextBox实现按字节长度限制输入功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25
- PHP初学中很多同学搞不清字符串长度的截取用法。小编分享了一篇写得很详细的关于字符串长度截取用法的文章，希望能解答大家的疑问。 本文实例讲述了PHP中字符串长...2017-01-22
- 定义和用法 该strlen （ ）函数返回的长度字符串。 他的作用是计算字字符长度的,中文一个字为2 语法 strlen(string) ParameterDescriptionstringRequired. Specifie...2016-11-25
- 这篇文章主要介绍了C语言中求字符串长度的函数的几种实现方法,需要的朋友可以参考下...2020-04-25
- 代码如下 复制代码 function bigendian2int($byte_word, $signed = false) { $int_value = 0; $byte_wordlen = str...2016-11-25
- 本教程只讲了二个地方一个是利用数组函数in_array 检查数组中是否存在指定字符串，与利用count函数来判断数组长度。 定义和用法 in_array() 函数在数组中搜索给定...2016-11-25
- 在php中测试字符串长度的函数是strlen，但今天我发现使用isset更加的更高效哦，口说不你不相信下面我举两个例子来给各位看看。 学PHP的都了解，在PHP中获取字符串有一...2016-11-25
- 这篇文章主要介绍了java 定义长度为0的数组/空数组案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-25
- c#固定长度的随机字符串例子，需要的朋友可以参考一下...2020-06-25
- .NET截取指定长度汉字超出部分以"..."代替 实例分享，需要的朋友可以参考一下...2021-09-22
- 有次，有个以前的同事（是个小MM）问我一个问题：她想在一个网页中显示一个文章标题的列表，但是考虑到有的标题太长，影响美观，就想参照别的网站上的样式，把超过固定长度的文字...2016-11-25
- 强大的php可以利用mysql交互的相关函数可以获取数据表的字段信息，如可以获取数据表获取字段名，字段长度，字段信息等。 $hostname="localhost"; //定义连接...2016-11-25
PHP 连接 MSSQL 时 nvarchar 字段长度被截断为 255
PHP 连接 MSSQL 的新手经常遇到这个问题：数据库里面的 nvarchar 字段中数据一切正常，但是用 PHP 查询出来却发现长度只有 255，我们都知道，在 MySQL 里面 varchar 的长度只...2016-11-25- 本函数的作 用判断是否为合法邮编（固定长度）,方法很简单就是用正则来操作。 代码如下 复制代码 < ?php // 函数名：CheckPost($C_post) //...2016-11-25
- function ssubstr($string, $length, $dot = ' ...') { global $charset; if(strlen($string) <= $length) { return $string; } $string = str_replac...2016-11-25
- file_get_contents() 函数把整个文件读入一个字符串中。 和 file() 一样，不同的是 file_get_contents() 把文件读入一个字符串。 file_get_contents() 函数是用于将文件...2016-11-25
- 本文章给大家介绍一个PHP正则匹配指定长度字符必须有数字、字母、下划线组成，现在我们先来看一个简单正则,规则是:6到16位，这样就可以了{6,16} 任意的字符6到16位是...2016-11-25
- 在php检测数组长度的函数有sizeof count 下面看个简单实例*/ $colorlist = array("apple"=>"red", "grass"=>"green","sky"=>"blue","night"=>"black","wall"=>"whit...2016-11-25
- 文章介绍了关于CSS控制标题字符长度多余部分用省略号表示，有需要的朋友可以参考一下本实例 代码如下 复制代码 <style type="text/css"> .ab...2017-07-06