JS判斷字符串長度，結合element el-input el-form 表單驗證（英文占1個字符，中文漢字占2個字符）

 

首先看看判斷字符串長度的幾種方法（英文占1個字符，中文漢字占2個字符）

方法一：

 function strlen(str) {
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                var c = str.charCodeAt(i);
                //單字節加1 
                if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
                    len++;
                } else {
                    len += 2;
                }
            }
            return len;
     }

// strlen('adcd')    //4
// strlen('adcd哈')  //6

 

方法二：

       function GetLength(str) {
            var realLength = 0,
                len = str.length,
                charCode = -1;
            for (var i = 0; i < len; i++) {
                charCode = str.charCodeAt(i);
                if (charCode >= 0 && charCode <= 128) realLength += 1;
                else realLength += 2;
            }
            return realLength;
        }

        // GetLength('1234a')   //5
        // GetLength('我是誰')   //6

 

方法三：

      function GetLength(str) {
            var l = str.length;
            var blen = 0;
            for (i = 0; i < l; i++) {
                if ((str.charCodeAt(i) & 0xff00) != 0) {
                    blen++;
                }
                blen++;
            }
            return blen;
        }

        // GetLength('1234a') //5
        // GetLength('我是誰') //6

上面三種方法都能返回字符串的長度，結合element的自帶表單驗證功能，就能做出好看又好用的驗證啦。下面是使用element自定義驗證實現提示輸入要求的案列：

    <el-form :model="form" label-width='130px' :rules="rules" ref="ruleForm">
        <el-form-item label="項目名稱:" prop="projectname">
            <el-input v-model="form.projectname" placeholder="請輸入項目名稱"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="subOnline()">在線生成</el-button>
        </el-form-item>
    </el-form>
    <script>
        export default {
            data() {
                //這里就是整個checkName啦，就是方法一的使用
                var checkName = (rule, value, callback) => {
                        var len = 0;  
                        for (var i=0; i<value.length; i++) {   
                            var c = value.charCodeAt(i);   
                            //單字節加1   
                            if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {   
                                len++;   
                            } else {   
                                len+=2;   
                            }   
                        };   
                        if ((len < 4 && len> 0) || len > 30) {
                            //重點重點，下面就是填寫提示的文字
                            callback(new Error('名稱長度為4-30個字符，一個中文字等於2個字符。'));
                        } else {
                            callback();
                        }
                };
                  
                return {
                    form: {
                        projectname: '',
                    },
                    rules: {
                        projectname: [
                            //validator是自定義校驗固定寫法,我們只需填他的值(checkName)就好了， callback 必須被調用。
                            {validator: checkName,trigger: 'blur' }
                        ]
                    },
                };
            },
            methods: {
                    //為了容易理解我就沒寫多余的方法，通過trigger: 'blur'使得輸入框失去焦點就觸發事件，也就看得到效果了
            }
        }
    </script>

   說了這么多，來看看效果吧：

 

******這是3個字符的，不合條件******

******這是4個字符的，符合條件******

 

******這是3個字符的，不符合條件******