精华内容
下载资源
问答
  • 原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适。所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性。 百度搜了一圈都没找到合适的现成的解决方案,所以...
  • 场景 当我们需要使用 element-ui 来校验长度的时候,可以在前端用其内置的 max、min 属性来限制。...所以,我们需要自定义一个函数,可以满足中英文字符的混合校验,精准地对字段的长度进行限制。 实现 const

    场景

    当我们需要使用 element-ui 来校验长度的时候,可以在前端用其内置的 maxmin 属性来限制。但是我们知道——由于数据库的编码格式的不同,一个汉字在数据库中需要占 2-3 个字节。

    假如有一个 name 字段,数据库中设置的长度为64。在 element-ui 中如果用 max:64 的方法对字段进行限制,那么输入64个汉字时,数据库中实际的长度就是 192 ,这显然不是我们想要的。所以,我们需要自定义一个函数,可以满足中英文字符的混合校验,精准地对字段的长度进行限制。

    实现

    const validLength = function (rule, value, callback) {
        function getStrLength(str) {
            // 当数据库编码为一个汉字占3个字节时,把字符中的每个汉字都替换成'xxx'再得出长度
            return str.replace(/[^x00-xff]/g, 'xxx').length;
        }
        if (!value) {
            callback();
        } else if (getStrLength(value) <= 64) {
            callback();
        } else {
            return callback(new Error('不能超过 64 个字符'))
        }
    }
    

    明天更新校验函数 validator 的传参与复用

    展开全文
  • 原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适。所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性。 百度搜了一圈都没找到合适的现成的解决方案,所以...

    原本的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})}]}
            }
    

    若是看不懂校验函数的写法,可先了解一下闭包高阶函数的概念,这里就不多说啦。

    展开全文
  • export default { data() { let validcodeName=(rule,value,callback)=>{ //替换双字节汉字,为aa,限制输入框长度; if(value.replace(/[^\x00-\xff]/g,"aa").length>=24){...

     

     

    export default {
        data() {
            let validcodeName=(rule,value,callback)=>{
                //替换双字节汉字,为aa,限制输入框长度;
                if(value.replace(/[^\x00-\xff]/g, "aa").length>=24){
                    callback(new Error('长度在1到12汉字'))
                }else{
                    callback()
                }
                
            };
            return {    
                popFormRules: {
                    Name:[{
                        type: 'string',
                        required: true,
                        message: '请输入场馆名称',
                        trigger: 'blur,change'
                    }, {
                        validator:validcodeName,
                        trigger: 'blur'
                    }],
                }
            }
        }
    },


    一个字符串==aa==2个字节;

    /[^\x00-\xff]/g:验证双字节,包括:汉字、汉语符号等;

     

    转载于:https://www.cnblogs.com/yancongyang/p/9889928.html

    展开全文
  • 在input的change事件调用此方法: html: 直接使用 <vs-input class="w-full" v-model="formData.goodsAlias" placeholder="请输入名称" @input="changeValue('goodsAlias')" //调用方法 @keyup.enter=...

    在input的change事件中调用此方法:

    html:

    方法1:直接使用

     <vs-input
        class="w-full"
        v-model="formData.goodsAlias"
        placeholder="请输入名称"
        @input="changeValue('goodsAlias')"  //调用方法
        @keyup.enter="changeValue('goodsAlias')" //回车键
      />
    

    方法2:配合maxlength属性进行使用

     <vs-input
        class="w-full"
        v-model="formData.goodsAlias"
        maxlength="50" 	// 最大长度50个字符,不区分汉字/字母
        placeholder="请输入名称"
        @input="changeValue('goodsAlias')"
        @keyup.enter="changeValue('goodsAlias')" //回车键
      />
    

    js:

          //校验字符:最多输入25个中文,或者50个英文
            changeValue(attr) {
                //console.log('attr',attr) //传入的属性
                let value = formData[attr]; //校验的字段
                // 中文、中文标点、全角字符按1长度,英文、英文符号、数字按0.5长度计算
                let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/;
                let maxLimitStr = 25; //25个汉字
                let pass = true;
                let substringStr = "";
                let length = 0;
                let strArr = value.split("");
                strArr.map((str) => {
                    if (pass) {
                    if (cnReg.test(str)) {
                        //中文
                        length++;
                    } else {
                        //英文
                        length += 0.5;
                    }
                    //大于最大限制的时候
                    if (length > maxLimitStr) {
                        pass = false;
                        this.$notifyError(
                        "文字长度已超出最大值,最大值为" + maxLimitStr * 2 + "个字符",
                        );
                        //将校验的字符截取返回
                        this.formData[attr] = substringStr;
                    } else {
                        substringStr += str;
                    }
                    }
                });
                return pass;
            },
    
    展开全文
  • const RegCn = /[\u4e00-\u9fa5]/g; let value = '你好啊aa'; value = value.replace(RegCn, 'aa'); console.info(value.length);//8 let RegCn = /[\u4e00-\u9fa5]/g;... let value = 'aA';... value.
  • 而一般情况下,1个中文对应的字符等于2个英文对应的字符,所以在制定名称长度时还需要考虑到中英文字符长度的不同。 因此,交互设计师需要全面考虑到每一种情况才能制定出极具功能性的设计规范。 今天,我通过几个...
  • 1、计算字符长度,中文2个字符英文1个字符 public static int realLen(String str) { int m = 0; char arr[] = str.toCharArray(); for(int i=0;i;i++) {
  • Vue.prototype.widthCheck = function(str, len) { // 限制输入框输入的字符数 let temp = 0; for (let i = 0; i < str.length; i++) { if (/[\u4e00-\u9fa5]/.test(str[i])) { temp += 2; } else { temp+...
  • 我们项目要求的是中文字符算2个长度英文字符算1一个长度。且我的是vue项目,需要实现双向数据绑定。经过一番研究得出下面的方法实现,暂时看来应该没问题。在此记录。 项目使用的是elementUI库,为了输入框与...
  • * 截取字符中英文混合 * @param str 待处理字符串 * @param len 截取字节长度 中文2字节 英文1字节 */ function subString1(str, len){ var regexp = /[^\x00-\xff]/g;// 正在表达式匹配中文 // 当字符串...
  • Vue form表单密码强度校验 必须包含大小写字母、数字、特殊字符长度再8-16位之间
  • public class Demo{ /** * 判断一个字符是Ascill字符还是其它字符(如汉,日,韩文字符) * * @param char * c, 需要判断的字符 * @return boolean, 返回true,Ascill字符 */ public static boolean isLetter
  • js,vue的文本长度校验方法

    千次阅读 2019-07-11 11:09:00
    js,vue的文本长度校验方法 后续添加 ... // 中文、中文标点、全角字符按1长度英文英文符号、数字按0.5长度计算 let cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g let mat = v...
  • 输入框最多输入16个字符 汉字最多显示5个,超出部分以...显示 英文最多显示10个,超出部分以...显示 实现 搭建简单页面,并设置简单样式 在正式开始写核心代码之前,要先把代码结构搭建起来,这样后面写的时候...
  • 说真的,我卡在这里很久了,也查了网上很多前辈的文章与建议;...你的中英文内容,各种标签的中英文内容&lt;/div&gt;的高度去掉,去掉,去掉,三遍了啊!这个就是用内容撑开div标签我们可以设...
  • 近期做项目需要实现组织用户下的个人用户按其名称排序,因此写了个按字符排序的工具类供大家参考 这里按照字符串第一个字符,使用java原生排序的方式,即特殊字符-->数字-->英文-->中文,为了能够将英文字符串和...
  • //获取字符长度,不区分中英文 export const getDataLength = (fData) =&amp;amp;gt; { fData = fData + ''; var intLength = 0 for (var i = 0; i &amp;amp;lt; fData.length; i++) { //如果是...
  • 结合Vue控制字符和字节的显示个数

    千次阅读 2017-10-23 00:05:30
    输入框最多输入16个字符 汉字最多显示5个,超出部分以...显示 英文最多显示10个,超出部分以...显示 实现 搭建简单页面,并设置简单样式 在正式开始写核心代码之前,要先把代码结构搭建起来,这样后面写的时候就...
  • 从CSDN 上找的... 1,JS function limitLength(value, byteLength, title, attribute) {//限制输入框字数   var newvalue = value.replace(/[^\x00-\xff]/g, "**");... var length = newvalue.length;
  • 在nodejs,做ajax转发的时候,使用JSON.stringify()得到的字符串,会有长度问题,由于没有指定字符集,发送给后台,后台的fasjson解析异常 org.springframework....
  • 主要介绍了vue input 校验字母数字组合且长度小于30的实现代码,文章给大家补充介绍了在Vue.Js下使用el-input框只能输入数字并限制位数并且限制中文输入以及粘贴功能,感兴趣的朋友跟随脚本之家小编一起看看吧
  • VUE

    2021-03-16 14:02:10
    VueCLI3--运行单个*.vue文件 1.安装全局扩展 npminstall-g@vue/cli-service-global 2.运行.vue文件 vueserve文件夹名 注意: 如果已经安装过可以直接运行vue serve 文件夹运行时, 会自动生成一个node_modules...
  • ThinkSNS后端框架使用laravel,每周和 laravel master ...言归正传,之所以写继篇,其实是来检讨的,上一次发表了《ThinkSNS+ 如何计算字符显示长度》后,有网友几经测试后告知str_word_count 有问题。 根据Think...
  • 求匹配 4到16个字节 的 中文,英文字母,数字,下划线 混合 的字符串的正则表达式.(假设一个中文字符算两个字节,其它算一个字节)匹配中文字符的正则表达式: [\u4e00-\u9fa5]匹配双字节字符(包括汉字在内):[^\x00-\xff...
  • 满足复制粘贴时的字符判断,中文输入时判断; 使用: vue、element-ui <el-input type="textarea" v-model="versionForm.notes" v-on:input="checkLength(versionForm.notes)"></el-input> 限制...
  • vue中实现验证码

    千次阅读 2020-08-22 11:03:49
    一,安装vue-puzzle-vcode cnpm i -S vue-puzzle-vcode 二,实现代码 <template> <div> <Vcode :show="isShow" @success="success" @close="close" /> <el-button @click="submit">...
  • Vue 上 textarea 根据字母数字中文换行符号显示剩余长度 第一次写博客,主要是想把自己平时开发过程遇到的问题记录下来,做个积累,也给各位前端小伙伴一些知识分享,平时公司工作比较忙,忽略了提升自己,通过...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,513
精华内容 605
关键字:

vue中英文字符长度

vue 订阅