Element自定义校验规则

基础布局

<el-form-item label="电话" prop="phone">
	<el-input v-model="formData.phone"></el-input>
</el-form-item>

validator

data() {
	// 验证手机号的规则
	var checkMobile = (rule, value, callback) => {
		// 验证手机号的正则表达式
		const regMobile = /^1[3456789]\d{9}$/
		if (regMobile.test(value)) {
			return callback()
		}
		callback(new Error('请输入合法的手机号'))
	};
	return {
		rules: {          
			phone: [
				{ required: true, message: "电话不能为空", trigger: "blur" },
				// checkMobile,就是需要定义的方法名，方法写在data中
				{ validator: checkMobile, trigger: 'blur' }
			],
		},
	 }
}

data() {
	// 验证数字的规则包括小数
	var checkMobile = (rule, value, callback) => {
		// 验证数字正则表达式
		let reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g;
        if (!reg.test(value)) {
          callback(new Error('请输入数字'));
        }
	};
	return {
		rules: {          
			phone: [
				{ required: true, message: "内容不能为空", trigger: "blur" },
				{ validator: checkMobile, trigger: 'blur' }
			],
		},
	 }
}