vue el-input的多种验证

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