element-ui提供了一套表單驗證規則，非常方便，但也要注意一些地方。

html

<el-form :inline="true" :model="newReg" :rules="rules" ref="newReg" :label-width="'60px'">
    <el-form-item label="付款人:" prop="payer">
        <el-input v-model="newReg.payer" placeholder="請輸入付款人姓名/手機號碼/UID"></el-input>
    </el-form-item>
    <el-form-item label="收款人:" prop="payee">
        <el-input v-model="newReg.payee" @blur="showUserInfo" placeholder="請輸入收款人姓名/手機號碼/UID"></el-input>
    </el-form-item>
    <el-alert title="收款人詳細資訊" type="info" :closable="false" v-if="alertUserInfo" class="modalUserDetails">
        <p>姓名：{{payeeInfo.lastName}}</p>
        <p>UID：{{payeeInfo.userId}}</p>
        <p>手機號碼：{{payeeInfo.mobile}}</p>
        <p><el-button size="mini" type="text">檢視詳情</el-button></p>
    </el-alert>
    <el-form-item label="幣種:">
        <el-select v-model="newReg.productCode">
            <el-option v-for="i in currencyList" :label="i"  :key="i" :value="i"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="數量:" prop="quantity">
        <el-input v-model.number="newReg.quantity" placeholder="請輸入劃撥數量"></el-input>
    </el-form-item>
    <el-form-item label="備註:" prop="remarks">
        <el-input v-model="newReg.remarks" placeholder="請輸入備註(2-50)" type="textarea" :autosize="{ minRows: 4, maxRows: 4}" :maxlength="50"></el-input>
    </el-form-item>
    <p></p>
    <el-form-item>
        <el-button @click="submitForm('newReg')" class="ModalBtn" type="primary">確定</el-button>
    </el-form-item>
</el-form>
 

js

data(){
	var newReg1 = (rule, value, callback) => {
		if (this.trimStr(value).length<2) {
			callback(new Error('不能少於兩個字元'));
		} else {
			callback();
		}
	};
	var newReg2 = (rule, value, callback) => {
		var value=this.trimStr(value);
		if (value!=parseFloat(value)) {
			callback(new Error('只能是數字'));
		} else if(value<=0){
			callback(new Error('不能為負數'));
		}else{
			callback();
		}
	};
	return{
		newReg:{                  //新建劃撥
			payer:"",             //付款人
			payee:"",             //收款人
			productCode:"USDT",   //幣種
			quantity:"",          //數量
			remarks:"",           //備註
		},
		rules: {
			payer: [ { validator: newReg1, trigger: 'blur' } ],
			payee: [ { validator: newReg1, trigger: 'blur' } ],
			quantity: [{ validator: newReg2, trigger: 'blur' }],
			remarks: [{ validator: newReg1, trigger: 'blur' },]
		},
	}
}