vue+elementui 封装表单自定义校验

<!-- 子组件 -->

<template>
	<div>
		<el-form label-position="left" :model="ruleForm"
		:rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
		
			<el-form-item label="选择设备故障:" prop="region1" style="display: inline-block;">
				<el-select v-model="ruleForm.region1" placeholder="请选择品牌">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
				
			<el-form-item prop="region2" style="display: inline-block;margin-left: -100px;">
				<el-select v-model="ruleForm.region2" placeholder="请选择机型">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
				
			<el-form-item prop="region3" style="display: inline-block;margin-left: -100px;">
				<el-select v-model="ruleForm.region3" placeholder="请选择故障类型">
				    <el-option
				      v-for="item in options"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				</el-select>
			</el-form-item>
			
			<el-form-item>
				<p>如需要，可填写更多故障类型</p>
				<el-input
				  style="width: 500px;"
				  type="textarea"
				  placeholder="可填写更多故障现象"
				  v-model="textarea"
				  maxlength="100"
				  show-word-limit
				>
				</el-input>
			</el-form-item>
			
			<div>
				<el-form-item label="选择地区:" prop="province" style="display: inline-block;">
					<el-select v-model="ruleForm.province" placeholder="请选择省">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="city" style="display: inline-block;margin-left: -100px;">
					<el-select v-model="ruleForm.city" placeholder="请选择市">
					    <el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					</el-select>
				</el-form-item>
			</div>
			
			<el-form-item label="填写联系方式:" prop="tel" style="display: inline-block;">
				<el-input style="width: 200px;" v-model="ruleForm.tel" 
				placeholder="联系电话"></el-input>
			</el-form-item>
			<el-form-item prop="name" style="display: inline-block;margin-left: -100px;">
				<el-input style="width: 200px;" v-model="ruleForm.name" 
				placeholder="姓名"></el-input>
			</el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">确认预约</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	//引入封装的表单验证
	import Format from '@/utils/validator.js'
	export default{
		data(){
			return{
				ruleForm: {
					region1: '',
					region2: '',
					region3: '',
					province: '',
					city: '',
					tel: '',
					name: '',
				},
				rules: {
					region1: [
						{ required: true, message: '请选择品牌', trigger: 'change' }
					],
					region2: [
						{ required: true, message: '请选择机型', trigger: 'change' }
					],
					region3: [
						{ required: true, message: '请选择故障类型', trigger: 'change' }
					],
					province: [
						{ required: true, message: '请选择省', trigger: 'change' }
					],
					city: [
						{ required: true, message: '请选择市', trigger: 'change' }
					],
					tel: [//使用自定义验证
						{ required: true,validator: Format.FormValidate.Form().Tel,trigger: 'blur' }
					],
					name: [
						{ required: true, message: '请输入姓名', trigger: 'blur' },
						{ min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
					],
				},
				options: [
					{
						value: '选项1',
						label: '黄金糕'
					}, {
						value: '选项2',
						label: '双皮奶'
					}, {
						value: '选项3',
						label: '蚵仔煎'
					}, {
						value: '选项4',
						label: '龙须面'
					}, {
						value: '选项5',
						label: '北京烤鸭'
					}
				],
				text: '',
				textarea: '',
			}
		},
		methods:{
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
				  if (valid) {
				    alert('submit!');
				  } else {
				    console.log('error submit!!');
				    return false;
				  }
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>

//utils/validator.js

let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
let email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/ //邮箱
let tel = /^1[3456789]\d{9}$/ //手机号码
let fax = /^(\d{3,4}-)?\d{7,8}$/ //传真
let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名
let FormValidate = (function() {
	// eslint-disable-next-line
	function FormValidate() {}
	// From表单验证规则  可用于公用的校验部分
	FormValidate.Form = function() {
		return {
			// 姓名的验证规则
			Name: function(rule, value, callback) {
				if (!value) {
					return callback(new Error('姓名不能为空'))
				}
				if (!name.test(value)) {
					callback(new Error('请输入正确姓名!'))
				} else {
					callback()
				}
			},
			// 邮箱的正则
			Email: function(rule, value, callback) {
				if (!value) {
					return callback(new Error('邮箱不能为空'))
				}
				if (!email.test(value)) {
					callback(new Error('请输入正确的邮箱!'))
				} else {
					callback()
				}
			},
			// 身份证的验证规则
			ID: function(rule, value, callback) {
				if (!value) {
					return callback(new Error('身份证不能为空'))
				}
				if (!regId.test(value)) {
					callback(new Error('请输入正确的二代身份证号码'))
				} else {
					callback()
				}
			},
			// 电话号码的验证
			Tel: (rule, value, callback) => {
				if (!value) {
					return callback(new Error('电话不能为空'))
				}
				if (!tel.test(value)) {
					callback(new Error('请正确填写电话号码'))
				} else {
					callback()
				}
			}
		}
	}

	// FromOne表单验证规则  用于FromOne个性化的校验
	FormValidate.FormOne = function() {
		return {
			// 姓名的验证规则
			Name: function(rule, value, callback) {
				if (!value) {
					return callback(new Error('姓名不能为空'))
				}
				if (!name.test(value)) {
					callback(new Error('请输入正确姓名!'))
				} else {
					callback()
				}
			}
		}
	}
	return FormValidate
}())
exports.FormValidate = FormValidate