【vue】vue +element 搭建項目，el-input 經常使用的驗證

時間 2019-11-17

標籤 vue element 搭建項目 input 經常使用驗證简体版

原文原文鏈接

1.el-input 經常使用佈局app

<el-input class="filter-item dialog-search" size="small" 
    @keyup.enter.native="searchBtn" 
    v-model.lazy.trim="searchKey" 
　　 @change="check"
　　:placeholder="請輸入關鍵字" >
    <el-button slot="append" icon="el-icon-search" @click.native="searchBtn"></el-button>
</el-input>

2.input的限制條件佈局

①只能輸入大於0的整數ui

check(value) {
    let reg = /^[1-9]\d*$/;
    var _this = this;
    if (value) {
        if (new RegExp(reg).test(value) == false) {
            setTimeout(() => {
                _this.actionDataForm.studNum = '';

               _this.errorTip = true;

　　　　　　　　}, 500); }

       else { 
　　　　　　this.errorTip = false; 
　　　　} 
  } 
},

form表單驗證中只能輸入整數（方法一）this

佈局：編碼

<el-form-item label="充值餘額：" prop="charge_money" >
　　<el-input placeholder="1-999999" size="small" v-model.number ="ruleForm.charge_money" @input="computedBalance" style="width: 238px;"></el-input> 元
</el-form-item>

js：spa

var checkBalance = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('充值餘額不能爲空'));
    }
    setTimeout(() => {
        if (!Number.isInteger(value)) {
            callback(new Error('請輸入數字值'));
        } else {
            if (Number(value) > 999999) {
                callback(new Error('請輸入1-999999的數字'));
            } else {
                callback();
            }
        }
    }, 1000);
};

form表單驗證中只能輸入整數（方法二，麻煩）code

佈局：orm

<el-form-item label="充值餘額：" prop="charge_money" >
　　<el-input placeholder="1-999999" size="small" v-model ="ruleForm.charge_money" @input="computedBalance" style="width: 238px;"></el-input> 元
</el-form-item>

js:blog

var checkBalance = (rule, value, callback) => {
    let reg = /^[1-9]\d*$/;  //整數
    let reg2 = /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/;  //小數
    if (!value) {
        return callback(new Error('充值餘額不能爲空'));
    }
    setTimeout(() => {
        if (!reg.test(value)) {
            if (reg2.test(value)) {
                callback(new Error('請輸入整數'));
            } else {
                callback(new Error('請輸入符合規則的數字'));
            }
        } else if (Number(value) > 999999) {
            callback(new Error('請輸入1-999999的數字'));
        } else {
            callback();
        }
    }, 1000);
};

②只能輸入數字（整數，浮點數）ip

check() {
    let reg = /[^\d\.]/g;
    if (this.searchKey && new RegExp(reg).test(this.searchKey)) {//非數字
        this.$message({
            message: '請輸入正確的數字',
            type: 'warning'
        })
        return;
    }
    ...
    ...
},

③手機號驗證

checkMobile (number) {
    var partten = /^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i;
    return partten.test(number);
},

④郵箱驗證

var checkEmail = (rule, value, callback) => {
    if (!value) {
        return callback();
    }
    if (value) {
        setTimeout(() => {
            var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
            if (!reg.test(value)) {
                callback(new Error('請輸入有效的電子郵箱！'));
            } else {
                callback();
            }
          }, 500);
      }
}

⑤將輸入框的內容全角轉爲半角

var ToCDB = function(str){ 
    var tmp = ""; 
    for(var i=0;i<str.length;i++) 
    { 
        if(str.charCodeAt(i)>65248&&str.charCodeAt(i)<65375) 
        { 
            tmp += String.fromCharCode(str.charCodeAt(i)-65248); 
        }else { 
            tmp += String.fromCharCode(str.charCodeAt(i)); 
        } 
    } 
    return tmp 
}

⑥名稱字數限制(30箇中文字符長度)

nameLimt (){
    var reg = /[!@#$%^&*?？\/\\「：：;~+]/;
    this.companyName = this.companyName.replace(reg,'')    ;
    var GetLength = function (str) {
        //得到字符串實際長度，中文2，英文1
        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;
    };
    
     /** 
    * js截取字符串，中英文都能用 
    * @param str：須要截取的字符串 
    * @param len: 須要截取的長度 
    */
    var cutstr = function(str, len) {
        var str_length = 0;
        var str_len = 0;
        var str_cut = new String();
         str_len = str.length;
        for (var i = 0; i < str_len; i++) {
            var temp = str.charAt(i);
            str_length++;
            if (escape(temp).length > 4) {//中文字符的長度經編碼以後大於4  
                str_length++;
            }
            str_cut = str_cut.concat(temp);
            if (str_length >= len) {
             return str_cut;
         }
       }
            
        //若是給定字符串小於指定長度,直接返回  
         if (str_length < len) {
           return str;
      }
    }
        
    if(GetLength(this.companyName) > 60){
        this.companyName = cutstr(this.companyName, 60);
        return;
    }
        
}

⑦只能輸入正整數和負整數

let reg = /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/;

⑧以字符開頭只能輸入數字、字母、下劃線

let reg = /^[a-zA-Z][a-zA-Z0-9_]*$/

3.el-input 和el-form一塊兒使用時驗證範例

export default {
    data() {
        var checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback();
            }
            if (value) {
                setTimeout(() => {
                    var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                    if (!reg.test(value)) {
                        callback(new Error('請輸入有效的電子郵箱！'));
                    } else {
                        callback();
                    }
                }, 500);
            }
        };

        return {
            ruleForm: {
                name: '',
                email: '',
            },
            rules: {
                name: [
                    {required: true, message: '請輸入姓名', trigger: 'blur'},
                    {min: 1, max: 15, message: '長度在 15 個字之內', trigger: 'blur'}
                ],
                email: [
                    {validator: checkEmail, trigger: ['blur,change']}
                ],

            },
        };
    },
}