ElementUI的表单验证及常用规则-CSDN博客

element-cn.eleme.io/#/zh-CN/com… 在官网上有关于form组件的详细介绍这里总结了几个常用的规则，方便下次使用必填，必选，邮箱，手机号，时间，数字，数组，字符长度，以邮箱为例子与手机号为例

//这是一个邮箱的验证规则
rules: {
	email: [{
			required: true,//是否必填
			message: '请输入邮箱地址',//错误提示信息
			trigger: 'blur'//检验方式（blur为鼠标点击其他地方，）
		},
		{
			type: 'email',//要检验的类型（number，email，date等）
			message: '请输入正确的邮箱地址',
			trigger: ['blur', 'change']（change为检验的字符变化的时候）
		}
	]，
  phone: [{
		required: true,
		pattern: /^1[34578]\d{9}$/,//可以写正则表达式呦呦呦
		message: '目前只支持中国大陆的手机号码',
		trigger: 'blur'
	}],
}
复制代码

这是代码，直接复制到html文件打开即可也可以使用此链接中的rules.js的方式，日常积累一些，直接引用即可 www.jianshu.com/p/6a29e9e51… 此文中还写了QQ，身份证等验证方式

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	</head>

	<body>
		<div id="app">
			<el-row>
				<el-col :span="12" :offset="6">
					<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="活动名称" prop="name">
							<el-input v-model="ruleForm.name"></el-input>
						</el-form-item>
						<el-form-item label="客户邮箱" prop="email">
							<el-input v-model="ruleForm.email"></el-input>
						</el-form-item>
						<el-form-item label="客户年龄" prop="age" prop='age'>
							<el-input type="age" v-model.number="ruleForm.age" auto-complete="off"></el-input>
						</el-form-item>
						<el-form-item label="活动区域" prop="region">
							<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
								<el-option label="区域一" value="shanghai"></el-option>
								<el-option label="区域二" value="beijing"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="活动时间" required>
							<el-col :span="11">
								<el-form-item prop="date1">
									<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
								</el-form-item>
							</el-col>
							<el-col class="line" :span="2">-</el-col>
							<el-col :span="11">
								<el-form-item prop="date2">
									<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
								</el-form-item>
							</el-col>
						</el-form-item>
						<el-form-item label="活动性质" prop="type">
							<el-checkbox-group v-model="ruleForm.type">
								<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
								<el-checkbox label="地推活动" name="type"></el-checkbox>
								<el-checkbox label="线下主题活动" name="type"></el-checkbox>
								<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item label="特殊资源" prop="resource">
							<el-radio-group v-model="ruleForm.resource">
								<el-radio label="线上品牌商赞助"></el-radio>
								<el-radio label="线下场地免费"></el-radio>
							</el-radio-group>
						</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>
				</el-col>
			</el-row>

		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						age: '',
						ruleForm: {
							name: '',
							region: '',
							date1: '',
							date2: '',
							delivery: false,
							type: [],
							resource: '',
							desc: '',
							email: '',
							age: '',
						},
						rules: {
							age: [{
									required: true,
									message: '年龄不能为空'
								},
								{
									type: 'number',
									message: '年龄必须为数字值'
								},
								
							],
							email: [{
									required: true,
									message: '请输入邮箱地址',
									trigger: 'blur'
								},
								{
									type: 'email',
									message: '请输入正确的邮箱地址',
									trigger: ['blur', 'change']
								}
							],
							name: [{
								required: true,
								message: '请输入活动名称',
								trigger: 'blur'
							}],
							region: [{
								required: true,
								message: '请选择活动区域',
								trigger: 'change'
							}],
							date1: [{
								type: 'date',
								required: true,
								message: '请选择日期',
								trigger: 'change'
							}],
							date2: [{
								type: 'date',
								required: true,
								message: '请选择时间',
								trigger: 'change'
							}],
							type: [{
								type: 'array',
								required: true,
								message: '请至少选择一个活动性质',
								trigger: 'change'
							}],
							resource: [{
								required: true,
								message: '请选择活动资源',
								trigger: 'change'
							}],
						}
					};
				},
				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>
	</body>

</html>
复制代码