el-input一些校验 & 事件

目录

1、el-input 限制输入纯数字和小数点。且输入不为0

2、限制el-input小数点后只能跟两位

3、el-select 创建条目 动态查找 & 鼠标移出选择框中仍有值（无需选中或回车）

4、手机号，必填且有校验

5、el-input，不必填，但有是否输入正确的校验

6、el-form清空校验

---

1、el-input 限制输入纯数字和小数点。且输入不为0

  <el-form ref="submitGatheringForm" :model="submitGatheringForm" :rules="formIndustryules" label-width="120px" size="small"> 
                    <el-form-item label="金额" prop="amount">
                        <el-input v-model="submitGatheringForm.amount" type="number" @blur="blurAmount" placeholder="请输入金额"></el-input>
                    </el-form-item> 
</el-form>




    methods: {
        blurAmount(val) {
            if (this.submitGatheringForm.amount * 1 == 0) {
                this.submitGatheringForm.amount = '';
            }
        },}

或者

 <vxe-input v-model="price" type="text" @blur="blurRowPrice"></vxe-input>



    blurRowPrice() {
            var r = /\d+(\.\d+)?$/;  
            var flag = r.test(this.price * 1);
            if (flag) {
                if (this.price * 1 == 0) {
                   this.price = '';
                }
            } else {
                this.price= '';
            }
        },

 

2、限制el-input小数点后只能跟两位

<el-form ref="basicInfoForm" :model="basicInfoForm" :rules="formIndustryules" label-width="120px" size="small"> 
  <el-form-item label="金额" prop="amount">
      <el-input v-model="submitGatheringForm.amount"  @input="handleInput"></el-input>
   </el-form-item> 
</el-form>




 methods: {
  handleInput(value) {
       this.basicInfoForm.creditLine =
       this.basicInfoForm.creditLine
       .replace(/[^\d^\.]+/g, '')
       .replace(/^0+(\d)/, '$1')
       .replace(/^\./, '0.')
       .match(/^\d*(\.?\d{0,2})/g)[0] || '';
       // this.basicInfoForm.creditLine = value.replace(/[^\d\.]/g, '');
},

3、el-select 创建条目 动态查找 & 鼠标移出选择框中仍有值（无需选中或回车）

 <el-form-item label="物流公司" prop="logisticsName">
   <el-select v-model="overallShipmentForm.logistics"  @blur="blurComLog"  filterable remote :remote-method="remoteMethod" :loading="loading" @change="selectChanged" placeholder="请输入选择物流公司" allow-create default-first-option size="small">
      <el-option v-for="item in overallShioptions" :key="item.value" :label="item.label" :value="item"> </el-option>
    </el-select>
</el-form-item>

<script> 
export default {
    props: [],
    data() {
        return {
            overallShipmentForm: { 
                logistics: {},
                logisticsCode: '',
                logisticsName: '',
            },
            overallShioptions: [], //下拉选项
        },
    },
    methods: {   
        // 动态查找
        async remoteMethod(query) {
            if (query != '') {
                this.loading = true;
                // 根据输入框调接口查找是否有符合条件的，如果有就赋值overallShioptions
                let data = (await getoverallShioptions(query ).data;
                var list = data.map(item => {
                    return {
                        value: `${item.code}`,
                        label: `${item.name}`,
                    };
                });
                setTimeout(() => {
                    this.loading = false;
                    this.overallShioptions = list;
                }, 200);
            } else {
                this.overallShioptions = [];
            }
        },
        //用户输入后，移出输入框，el-input中仍有值，无需选中或回车
        blurComLog(e) {
            let value = e.target.value; // 输入框值
            console.log(value);
            if (value) {
                // 你输入才有这个值 不为空，如果你下拉框选择的话 这个值为空
                this.overallShipmentForm.logistics = value;
                this.overallShipmentForm.logisticsName = value;
                this.overallShipmentForm.logisticsCode = '';
            }
        },
</script>

4、手机号，必填且有校验

 data() {
        let validatete = (rule, value, callback) => {
            let valimessage = validatePhone(this.basicInfoForm.mobile);
            if (valimessage !== '') {
                callback(new Error(valimessage));
            } else {
                callback();
            }
        };
        return {
            basicInforules: { 
                mobile: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                    { validator: validatete, trigger: 'blur' },
                ],  
            }, 
        };
    },

5、el-input，不必填，但有是否输入正确的校验

 data() { 
        return {
            basicInforules: {  
                email: [
                    { required: false, message: '请输入邮箱！', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            const regExp = new RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/);
                            console.log(this.basicInfoForm.email);
                            if (this.basicInfoForm.email == '' || this.basicInfoForm.email == undefined) {
                                callback();
                            } else {
                                if (!regExp.test(this.basicInfoForm.email)) {
                                    callback(new Error('邮箱格式不正确'));
                                } else {
                                    callback();
                                }
                            }
                        },
                        trigger: 'blur',
                    },
                ],
            }, 
        };
    },

6、el-form清空校验

// 清除el-form所有表单内容，清空校验 
 this.$refs.formIndustrydata.resetFields();

// 清除校验
this.$refs.formIndustrydata.clearValidate();

// 清除对name的校验校验
this.$refs.formIndustrydata.clearValidate('name');

//如果不生效加上nextTick
this.$nextTick(() => {         
    this.$refs.formIndustrydata.clearValidate();
});