【vue】vue +element 搭建项目，el-input 常用的验证

1.el-input 常用布局

<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的整数

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表单验证中只能输入整数（方法一）

布局：

<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：

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表单验证中只能输入整数（方法二，麻烦）

布局：

<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:

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);
};

②只能输入数字（整数，浮点数）

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']}
                ],

            },
        };
    },
}

4.Event

实时输入使用 @input

作者：smile.轉角

QQ：493177502

秒客网

【vue】vue +element 搭建项目，el-input 常用的验证

相关文章