> 对于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 } ], } ```