element-ui rules简单示例

最新推荐文章于 2024-07-24 23:00:08 发布

白露-

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量356

点赞数

分类专栏： asp.net web学习笔记文章标签：前端

本文链接：https://blog.csdn.net/m0_56227168/article/details/127570816

版权

asp.net web学习笔记专栏收录该内容

49 篇文章 14 订阅

订阅专栏

1.源代码

这里不仅有rules,校验结果的反馈图标,还添加了消息提示,用于用户的良好体验

<html>

	<head>
		<title></title>
		<meta charset="UTF-8" />
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="element-ui/index.js"></script>
		<link rel="stylesheet" href="element-ui/theme-chalk/index.css" />
	</head>

	<body>
		<div id="app">
			<!--添加
				:rules="rules"
				prop="name" 每个标签给prop赋值input v-model绑定的值
				status-icon为输入框添加了表示校验结果的反馈图标
			-->
			<el-form ref="form" :rules="rules" status-icon :model="form" label-width="80px">
				<el-form-item label="活动名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="活动区域" prop="region">
					<el-select v-model="form.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="活动时间" prop="date1">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
					</el-col>
					<el-col class="line" :span="2">-</el-col>
					<el-col :span="11">
						<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="即时配送">
					<el-switch v-model="form.delivery"></el-switch>
				</el-form-item>
				<el-form-item label="活动性质" prop="type">
					<el-checkbox-group v-model="form.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="form.resource">
						<el-radio label="线上品牌商赞助"></el-radio>
						<el-radio label="线下场地免费"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="活动形式" prop="desc">
					<el-input type="textarea" v-model="form.desc"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('form')">立即创建</el-button>
					<el-button @click="resetForm('form')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>

		<script>
			var myform={
						name: '',
						region: '',
						date1: '',
						date2: '',
						delivery: false,
						type: [],
						resource: '',
						desc: ''
			};
			
			new Vue({
				el: '#app',
				data: {
					form:myform ,
					/*这里定义判定方式*/
					rules: {
			          name: [
			            { required: true, message: '请输入活动名称', trigger: 'blur' },
			            { min: 3, max: 5, message: '长度在 3 到 5 个字符', 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' }
			          ],
			          desc: [
			            { required: true, message: '请填写活动形式', trigger: 'blur' }
			          ]
			        }
					
				},
				
				methods: {
					/*符合条件后的数据处理*/
					onSubmit(formName) {
						console.log(this.form);
					},
					/*信息提示*/
					open2() {
				        this.$message({
				          message: '恭喜你，操作成功',
				          type: 'success'
				        });
				     },
				     /*重置数据*/
				     resetForm(formName) {
				        this.$refs[formName].resetFields();
				     },
				    /*调用判断逻辑*/
				    submitForm(formName) {
				        this.$refs[formName].validate((valid) => {
				          if (valid) {
				            this.onSubmit(formName) ;
				            
				            this.open2();
				          } else {
				          	this.$message.error('提交错误');
				            console.log('error submit!!');
				            return false;
				          }
				        });
				      }
				}
			})
		</script>
	</body>

</html>