目录

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;// 根据输入框调接口查找是否有符合条件的，如果有就赋值overallShioptionslet 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();
});