> 對于input輸入框只能做數字輸入的情況下限制 ``` <div> <el-form-item label="開戶行:" prop="bankName" > <el-input v-model="formData.bankName" maxlength="100" @keyup.native="proving"/> </el-form-item> </div> proving() { this.formData.bankName = this.formData.bankName.replace(/[^\.\d]/g,''); this.formData.bankName = this.formData.bankName.replace('.',''); }, ``` > el-input只能輸入英文和數字(原生屬性寫法) ``` // 英文和數字 onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" // 4--20個字符，僅可為中英文、數字、下劃線! /^[\u4e00-\u9fa5_a-zA-Z0-9]{4,20}$/ // 6-16個字符 /^.{4,20}$/ // 手機正則驗證 /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(value) ``` > el-form搭配rules多重驗證 ``` var checkNameReg = (rule, value, callback) => { // 用戶名限制 if (!value) { return callback(); } if (value) { setTimeout(() => { var reg = /^[\u4e00-\u9fa5_a-zA-Z0-9]{4,20}$/; // 中英文、數字、下劃線! if (!reg.test(value)) { callback(new Error('4--20個字符，僅可為中英文、數字、下劃線!')); } else { callback(); } }, 500); } }; var validatePass = (rule, value, callback) => { // 輸入密碼 if (value === '') { callback(new Error('請輸入密碼')); } else if(value) { setTimeout(() => { var reg = /^.{4,20}$/; if (!reg.test(value)) { callback(new Error('密碼為6-16個字符')); } else { callback(); } }, 500); } else if(!value) { return callback(); } else { if (this.formData.checkPass !== '') { this.$refs.formData.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { // 確認密碼 if (value === '') { callback(new Error('請再次輸入密碼')); } else if (value !== this.formData.password) { callback(new Error('兩次輸入密碼不一致!')); } else { callback(); } }; const validateCard = (rule, value, callback) => { // 銀行卡正則驗證 6228480402564890018 if ( /([\d]{4})([\d]{4})([\d]{4})([\d]{4})([\d]{0,})?/.test(value) == false ) { callback(new Error("請輸入正確的銀行卡號")); } else { callback(); } }; const validatePhone = (rule, value, callback) => { // 手機正則驗證 if ( /^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(value) == false ) { callback(new Error("請輸入正確的手機號")); } else { callback(); } }; ``` ``` rules: { name: [ {required: true, message: '請輸入用戶名', trigger: 'blur' }, { validator: checkNameReg } ], mobile: [ { required: true,message: "請輸入登錄手機號",trigger: "blur"}, { validator: validatePhone } ], phone: [ { required: true,message: "請輸入客戶聯系人電話",trigger: "blur"}, { validator: validatePhone } ], } ```