vue根据选项是否显示校验规则

最新推荐文章于 2024-05-20 20:41:16 发布
最新推荐文章于 2024-05-20 20:41:16 发布
阅读量247 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42192641/article/details/132810593
版权

需求：红框内选项变成“否”那么就需要提示“填写接受人”

结果样式：

代码：

data() {
    return {
//   校验
			rules: {
				// receiver: [{ required: true, message: '请选择接收人', trigger: 'change' }],
				receiver: [{ validator: this.validateReceiver, trigger: 'change' }],
			},
    }

}
methods: {
		// 在组件的 methods 中定义一个函数，用于动态生成校验规则
		validateReceiver(rule, value, callback) {
			const { isFollowTime, isContent, isOnDuty, isFilledForm, isGoodEnv } = this.ruleForm;

			if (isFollowTime === '0' || isContent === '0' || isOnDuty === '0' || isFilledForm === '0' || isGoodEnv === '0') {
				// 满足条件中的任何一个条件时，要求选择接收人
				if (!value) {
					return callback(new Error('请选择接收人'));
				}
			}

			// 如果不满足条件，或者接收人已经选择，则校验通过
			callback();
		},

}

页面整体代码：

<template>
	<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="122px" :disabled="formDisabled">
		<el-form-item label="uuid" prop="uuid" v-show="false">
			<el-input v-model="ruleForm.uuid"></el-input>
		</el-form-item>
		<el-row>
			<el-col :span="12">
				<el-form-item label="培训项目" prop="planId">
					<el-select v-model="ruleForm.planId" @change="onPlanIdChanged">
						<el-option v-for="item in planIdList" :key="item.uuid" :label="item.project" :value="item.uuid"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<!-- <el-col :span="12">
          <el-form-item label="培训编号" prop="trainId"> 
            <el-input v-model="trainId" :disabled="true"></el-input>
          </el-form-item>
        </el-col>-->
			<el-col :span="12">
				<el-form-item label="教员" prop="teacherId">
					<el-select v-model="ruleForm.teacherId">
						<el-option v-for="item in teacherIdList" :key="item.uuid" :label="item.teacherName" :value="item.uuid"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="12">
				<el-form-item label="培训地点" prop="classroomName">
					<!--onplanidchanged加上ou,traintime,应到实到人数-->
					<!-- <el-select v-model="ruleForm.classroomId" >
            <el-option v-for="item in classroomIdList" :key="item.uuid" :label="item.classroomName" :value="item.uuid"></el-option>
        </el-select> -->
					<el-input v-model="ruleForm.classroomName"></el-input>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<!--<el-form-item label="培训课程" prop="courseId">
            <el-select v-model="ruleForm.courseId" @change="onCourseChanged">
                <el-option v-for="item in courseIdList" :key="item.uuid" :label="item.name" :value="item.uuid"></el-option>
              </el-select>
          </el-form-item>-->

				<el-form-item label="培训组织部门" prop="ou">
					<!--onplanidchanged加上ou,traintime,应到实到人数-->
					<el-input v-model="ruleForm.ou" maxlength="30"></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="24">
				<el-form-item label="培训时间" prop="trainTime">
					<el-date-picker v-model="ruleForm.trainTime" type="datetimerange" format="yyyy-MM-dd" range-separator="至" style="width: 100%"></el-date-picker>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row>
			<el-col :span="12">
				<el-form-item label="应到人数" prop="takeStudentCount">
					<el-input v-model="ruleForm.takeStudentCount" :disabled="true"></el-input>
				</el-form-item>
			</el-col>

			<el-col :span="12">
				<el-form-item label="实到人数" prop="actualStudentCount">
					<el-input v-model="ruleForm.actualStudentCount" maxlength="30"></el-input>
				</el-form-item>
			</el-col>
		</el-row>

		<div class="check-table">
			<el-row>
				<el-col :span="2">序号</el-col>
				<el-col :span="7">检查内容 </el-col>
				<el-col :span="3">检查结果</el-col>
				<el-col :span="7">情况说明 </el-col>
				<el-col :span="5">改正情况跟踪 </el-col>
			</el-row>

			<el-row>
				<el-col :span="2">1</el-col>
				<el-col :span="7">培训是否按时间执行。 </el-col>
				<el-col :span="3">
					<el-form-item prop="isFollowTime">
						<el-select v-model="ruleForm.isFollowTime">
							<el-option v-for="item in isFollowTimeList" :key="item.id" :label="item.text" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-input type="textarea" :rows="2" v-model="ruleForm.followTimeRemark" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
				<el-col :span="5">
					<el-input type="textarea" :rows="2" v-model="ruleForm.followTimeModify" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="2">2</el-col>
				<el-col :span="7">培训内容是否与培训计划一致。 </el-col>
				<el-col :span="3">
					<el-form-item prop="isContent">
						<el-select v-model="ruleForm.isContent">
							<el-option v-for="item in isFollowTimeList" :key="item.id" :label="item.text" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-input type="textarea" :rows="2" v-model="ruleForm.isContentRemark" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
				<el-col :span="5">
					<el-input type="textarea" :rows="2" v-model="ruleForm.isContentModify" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="2">3</el-col>
				<el-col :span="7">教员、学员是否均在岗。 </el-col>
				<el-col :span="3">
					<el-form-item prop="isOnDuty">
						<el-select v-model="ruleForm.isOnDuty">
							<el-option v-for="item in isFollowTimeList" :key="item.id" :label="item.text" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-input type="textarea" :rows="2" v-model="ruleForm.notDutyRemark" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
				<el-col :span="5">
					<el-input type="textarea" :rows="2" v-model="ruleForm.notDutyModify" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="2">4</el-col>
				<el-col :span="7">是否按要求填写《培训记录表》和《教员课时确认单》等相关表格。 </el-col>
				<el-col :span="3">
					<el-form-item prop="isFilledForm">
						<el-select v-model="ruleForm.isFilledForm">
							<el-option v-for="item in isFollowTimeList" :key="item.id" :label="item.text" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-input type="textarea" :rows="2" v-model="ruleForm.unfilledFormRemark" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
				<el-col :span="5">
					<el-input type="textarea" :rows="2" v-model="ruleForm.unfilledFormModify" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="2">5</el-col>
				<el-col :span="7">教员、学员在培训过程中是否做与培训无关的事情。 </el-col>
				<el-col :span="3">
					<el-form-item prop="isRelatedTrain">
						<el-select v-model="ruleForm.isRelatedTrain">
							<el-option v-for="item in isFollowTimeList" :key="item.id" :label="item.text" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-input type="textarea" :rows="2" v-model="ruleForm.unrelatedTrainRemark" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
				<el-col :span="5">
					<el-input type="textarea" :rows="2" v-model="ruleForm.unrelatedTrainModify" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
			</el-row>

			<el-row>
				<el-col :span="2">6</el-col>
				<el-col :span="7">培训环境是否良好。 </el-col>
				<el-col :span="3">
					<el-form-item prop="isGoodEnv">
						<el-select v-model="ruleForm.isGoodEnv">
							<el-option v-for="item in isFollowTimeList" :key="item.id" :label="item.text" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="7">
					<el-input type="textarea" :rows="2" v-model="ruleForm.badEnvRemark" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
				<el-col :span="5">
					<el-input type="textarea" :rows="2" v-model="ruleForm.badEnvModify" maxlength="50" show-word-limit resize="none"></el-input>
				</el-col>
			</el-row>

			<el-row style="height: 105px">
				<el-col :span="2">其他情况</el-col>
				<el-col :span="22">
					<el-input type="textarea" :rows="3" v-model="ruleForm.other" maxlength="300" show-word-limit resize="none"></el-input>
				</el-col>
			</el-row>
		</div>
		<el-row style="margin-top: 10px">
			<el-col :span="6">
				<el-form-item label="检查人" prop="checkerId">
					<el-input v-model="ruleForm.checkerId" maxlength="30" :disabled="true"></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="7" v-if="htmlFlag == 'add' || htmlFlag == 'update'">
				<el-form-item label="接收人" prop="receiver">
					<el-select v-model="ruleForm.receiver">
						<el-option v-for="item in receiverList" :key="item.uuid" :label="item.teacherName" :value="item.uuid"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="7" v-if="htmlFlag == 'audit' || htmlFlag == 'look'">
				<el-form-item label="教员(签字)" prop="signTeacherId">
					<el-select v-model="ruleForm.signTeacherId">
						<el-option v-for="item in receiverList" :key="item.uuid" :label="item.teacherName" :value="item.uuid"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="9">
				<el-form-item label="检查时间" prop="checkTime">
					<el-date-picker v-model="ruleForm.checkTime" format="yyyy-MM-dd HH:mm" type="datetime"></el-date-picker>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
    
<script>
import { saveTrainCheckList, updateTrainCheckList, getTrainPlanById, listChecker } from '@/api/eams/trainCheck.js';
// import { listTrainer } from '@/api/eams/teachRecord.js'
import { listAllTeacher } from '@/api/eams/teacherInfo.js';
import { listTrainerByPlanId } from '@/api/eams/trainPlan.js';
import { listTrainPlan } from '@/api/eams/trainPlan.js';
import { listBizCodeByType } from '@/api/eams/bizcode.js';
// import { listCoursesByPlanId } from '@/api/eams/courseArrange.js';

import { getFirstNodeCandidate } from '@/api/eams/flow.js';
export default {
	name: 'trainPlanData',
	props: {
		dialogFormVisible: {
			required: true,
			type: Boolean,
		},
		updateData: {
			type: Object,
			default() {
				return {};
			},
		},
		htmlFlag: {
			type: String,
			default: 'add',
		},
	},
	data() {
		return {
			title: '新增巡查记录',
			planIdList: [],
			trainIdList: [],
			// classroomIdList:[],
			courseIdList: [],
			operateTypeList: [],
			checkTypeList: [],
			openTypeList: [],
			teacherIdList: [],
			checkerList: [],
			isFollowTimeList: [],
			formDisabled: false, //表单是否禁用
			trainId: '',
			ruleForm: {
				uuid: '',
				planId: '',
				classroomId: '',
				classroomName: '',
				courseId: '',
				trainTime: '',
				theoryType: '',
				ou: '',
				takeStudentCount: '',
				actualStudentCount: '',
				checkTime: new Date(),
				teacherId: '',
				checkerId: '',
				signTeacherId: '',
				operateTeacherId: '',
				theory: '',
				operate: '',
				other: '',
				openType: '',
				writeSpeak: '',

				isFollowTime: '1',
				isContent: '1',
				isOnDuty: '1',
				isFilledForm: '1',
				isGoodEnv: '1',
				isRelatedTrain: '0',

				followTimeRemark: '',
				followTimeModify: '',
				isContentRemark: '',
				isContentModify: '',
				notDutyRemark: '',
				notDutyModify: '',
				unfilledFormRemark: '',
				unfilledFormModify: '',
				badEnvRemark: '',
				badEnvModify: '',
				unrelatedTrainRemark: '',
				unrelatedTrainModify: '',

				receiver: '', //接收人
			},
			photoAction: window.fileAction.uploadFileAction,
			imageUrl: '',
			//   校验
			rules: {
				//resourceName: [{ required: true, message: "请输入资源名称", trigger: "blur" }],
				//resourceType: [{ required: true, message: "请选择资源类型", trigger: "change" }],
				planId: [{ required: true, message: '请选择培训项目', trigger: 'change' }],
				// checkerId: [{ required: true, message: '请选择检查人', trigger: 'change' }],

				// receiver: [{ required: true, message: '请选择接收人', trigger: 'change' }],
				receiver: [{ validator: this.validateReceiver, trigger: 'change' }],

				// trainId: [{ required: true, message: "请输入培训编号", trigger: "blur" }],
			},

			any: {
				A: '',
				B: '',
				C: '',
				D: '',
				E: '',
				aPer: '',
				bPer: '',
				cPer: '',
				dPer: '',
				ePer: '',
				total: '',
			},

			receiverList: [], //接收人（教员）
		};
	},
	computed: {
		visible: {
			get() {
				return this.dialogFormVisible;
			},
			set(val) {
				this.$emit('update:dialogFormVisible', val);
			},
		},
	},

	mounted() {
		//查询实操类型列表
		listBizCodeByType({ type: 'operate_type' }).then((res) => {
			this.operateTypeList = res.data.data;
		});

		listBizCodeByType({ type: 'check_open_type' }).then((res) => {
			///
			this.openTypeList = res.data.data;
		});

		listBizCodeByType({ type: 'check_type' }).then((res) => {
			///
			this.checkTypeList = res.data.data;
		});

		listTrainPlan().then((res) => {
			this.planIdList = res.data.data;
		});

		listTrainerByPlanId({ planId: this.ruleForm.planId }).then((res) => {
			this.teacherIdList = res.data.data;
		});

		listChecker().then((res) => {
			this.checkerList = res.data.data;
		});

		//查询接收人列表
		getFirstNodeCandidate('patrolRecord').then((res) => {
			this.receiverList = res.data.data;
		});

		listBizCodeByType({ type: 'yes_or_no' }).then((res) => {
			// 是否按计划执行
			this.isFollowTimeList = res.data.data;
		});

		this.openInit();
	},

	methods: {
		//初始化
		openInit() {
			this.closeDialog();
			this.$set(this.ruleForm, 'checkerId', this.$UserInfoUtil.getCurrentRealName());
			this.formDisabled = false;
			if (this.htmlFlag == 'look' || this.htmlFlag == 'audit') {
				this.formDisabled = true;
			}
			if (this.htmlFlag != 'add') {
				this.ruleForm = { ...this.updateData };

				this.onPlanIdChanged(this.updateData.planId);
			}
		},

		//关闭窗口
		closeDialog() {
			// 清空表单
			this.$refs.ruleForm.resetFields();
			// 清除校验
			this.$refs.ruleForm.clearValidate();
		},

		// 触发父页面方法
		hideDialog() {
			this.$emit('handleDialogVisible', { dialogFormVisible: false });
		},

		// 提交
		submitForm() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					var param = { ...this.ruleForm };
					delete param.trainTime;
					param.trainPlaceId = param.classroomId;

					param.userId = this.$UserInfoUtil.getCurrentAccountId();
					param.deptId = this.$UserInfoUtil.getCurrentGroupId();
					param.userName = this.$UserInfoUtil.getCurrentRealName();
					param.roleId = this.$store.state.userInfos.userInfos.roles;

					if (this.htmlFlag == 'add') {
						//新增
						saveTrainCheckList(param).then((res) => {
							if (res.data.data) {
								this.$message({
									type: 'success',
									message: '新增巡查记录成功',
								});
								//刷新
								// this.$emit('handleDialogVisible', false);
								this.visible = false;
							} else {
								this.$message({
									type: 'error',
									message: '新增巡查记录失败',
								});
							}
						});
					} else {
						//修改
						updateTrainCheckList(param).then((res) => {
							if (res.data.data) {
								this.$message({
									type: 'success',
									message: '修改巡查记录成功',
								});
								//刷新
								// this.$emit('handleDialogVisible', false);
								this.visible = false;
							} else {
								this.$message({
									type: 'error',
									message: '修改巡查记录失败',
								});
							}
						});
					}
				} else {
					return false;
				}
			});
		},
		// 重置
		cancelForm() {
			this.visible = false;
		},

		//培训项目值改变时
		onPlanIdChanged(value) {
			//查询地点，应到人数，培训时间
			getTrainPlanById({ uuid: value }).then((res) => {
				var resData = res.data.data;
				this.$set(this.ruleForm, 'trainTime', [resData.startTime, resData.endTime]);
				this.ruleForm.takeStudentCount = resData.trainNumber;
				this.ruleForm.classroomName = resData.classroomName;
				this.ruleForm.classroomId = resData.classroomId;
				this.ruleForm.ou = resData.applyCompany;
			});
			listTrainerByPlanId({ planId: this.ruleForm.planId }).then((res) => {
				this.teacherIdList = res.data.data;
				this.receiverList = res.data.data;
			});
		},

		// //课程改变时
		// onCourseChanged(value){
		//   //根据课程id查询考核信息
		//   getCourseInfo4Analyse({planId:this.ruleForm.planId,courseId:value}).then(res=>{
		//     var courseData =  res.data.data;;
		//     if(courseData){
		//       this.ruleForm = courseData;
		//        //渲染理论考核形式
		//   this.ruleForm.theoryType = this.$common.renderCode(this.ruleForm.openType, this.openTypeList) + "," +this.$common.renderCode(this.ruleForm.writeSpeak,this.checkTypeList);
		//     }
		//   })
		//   //根据课程id查询巡查记录
		//   getAnalyseScoreResByCond({planId:this.ruleForm.planId,courseId:value}).then(res=>{
		//     this.any = res.data.data;
		//   })
		// },

		//渲染百分比
		onRenderPer(value) {
			return value ? (parseFloat(value) * 100).toFixed(2) : 0;
		},
		//渲染培训时间

		// 在组件的 methods 中定义一个函数，用于动态生成校验规则
		validateReceiver(rule, value, callback) {
			const { isFollowTime, isContent, isOnDuty, isFilledForm, isGoodEnv } = this.ruleForm;

			if (isFollowTime === '0' || isContent === '0' || isOnDuty === '0' || isFilledForm === '0' || isGoodEnv === '0') {
				// 满足条件中的任何一个条件时，要求选择接收人
				if (!value) {
					return callback(new Error('请选择接收人'));
				}
			}

			// 如果不满足条件，或者接收人已经选择，则校验通过
			callback();
		},
	},
};
</script>
    
<style scoped>
.trainCheck-add >>> .el-date-editor.el-input,
.trainCheck-add >>> .el-select {
	width: 100%;
}

.trainCheck-add >>> .avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.trainCheck-add >>> .avatar-uploader .el-upload:hover {
	border-color: #409eff;
}

.trainCheck-add >>> .avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.trainCheck-add >>> .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.check-table >>> .el-form-item__content {
	margin-left: 0px !important;
}

.check-table >>> .el-row {
	height: 70px;
}
.check-table >>> .el-col {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid #6b7887;
	border-left: 1px solid #6b7887;
	padding: 0px 4px;
}

.check-table >>> .el-row:last-child {
	border-bottom: 1px solid #6b7887;
}

.check-table >>> .el-row .el-col:last-child {
	border-right: 1px solid #6b7887;
}

.check-table >>> .el-textarea__inner {
	border: none;
}

.check-table >>> .el-select > .el-input {
	margin-top: 14px;
}

/* .trainCheck-add >>> .el-row .el-col:first-child .el-form-item__label {
	width: 90px !important;
}
.trainCheck-add >>> .el-row .el-col:last-child .el-form-item__content {
	margin-left: 115px !important;
} */
</style>

Rrar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《大数据： Hive 常用函数》
yexiangCSDN的专栏
10-19 214
一、Hive 函数 函数有库的概念，系统提供的除外，系统提供的函数可以在任意库使用 1.查看当前库所有的函数： show functions hive> show functions; OK ! != $sum0 % ... ... abs acos add_months aes_decrypt aes_encrypt ... ... concat concat_ws context_ngrams 2.查看函数的使用 : desc function 函数名 hive> desc..
element-vue根据下拉框选项判断是否显示输入框
qq_45807324的博客
03-30 4166
关于element-vue根据下拉框的选项判断是否显示输入框
vue.js条件渲染
chuanggangbo5551的博客
06-13 79
摘要：v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块 相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲...
Vue3 Element Plus表单自定义校验实现步骤
最新发布
qq_41737571的博客
05-20 829
【代码】Vue3 Element Plus表单自定义校验实现步骤。
Vue的控制页面是否显示的功能
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
11-21 1979
代码： flagFunction1(value){ if(value==0){ if(this.flag){ this.flag=false; }else{ this.flag=true; } } if(value==1){ if(this.flag1){ this.flag1=false; }else{ this.flag1=true; } }
Vue 控制组件的 显示or隐藏
yuroll的博客
03-16 897
v-show：css样式display:none控制是否显示。v-if：直接移除or添加DOM元素，性能差。若true为显示，false为隐藏。
vue中更加优雅的判断数据是否展示
weixin_46194350的博客
01-11 984
vue中更加优雅的判断数据是否展示
Vue表单验证插件Vue Validator使用方法详解
08-30
只需在Vue实例的`validators`选项中定义新的验证规则，然后在`v-validate`指令中引用即可。 总的来说，Vue Validator通过提供简洁的API和丰富的验证规则，使得在Vue应用中构建功能强大的表单验证变得容易且直观。...
vue 校验多个input框右侧提示
10-18
在Vue组件的data选项中声明一个验证规则对象，例如： ```javascript data() { return { rules: { field1: 'required|email', // 验证必填且需符合邮箱格式 field2: 'min:5|max:10' // 验证长度在5到10个字符...
vue+element实现表单校验功能
12-09
要实现这个功能其实并不难,element组件直接用就可以, ...3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 template代码: <el-form :model="Opinion" ref="MyOpinion" :rules=
vue实现表单数据验证的实例代码
09-29
- 当内置的验证规则无法满足需求时，Vue允许开发者创建自定义指令。在示例的第二部分，可以看到三个自定义指令`v-input`、`v-required`和`v-checked`的用法。 - 自定义指令可以通过Vue的`directives`选项注册，并...
vue element自定义表单验证请求后端接口验证
10-15
然后，在`data`选项中定义表单验证规则。Vue的`el-form`组件支持自定义验证函数，这可以通过`validator`属性实现。`validateUserid`函数负责调用后端接口并处理响应： ```javascript data() { var validateUserid ...
Vue.js:Select--Option ＞下拉框绑定和取值
ityw520的博客
10-14 1196
遇到了这个解决了，所以记录一下： 1.Vue.js 2.https://www.iviewui.com/components/select 完成vue.js下拉框选择绑定与取值，实现效果图如下： template代码 <template> <div> <Form :model="formItem" ref="formItem" :rules="ruleInline" :label-width="80"...
vue组件显示与隐藏
m0_53136368的博客
06-29 1253
配置路由的时候，可以给路由添加路由元信息【meta】，（路由需要配置对象，它的key不能瞎写） 其意味着，/home页面下，route中保存着一个叫show的对象，值为true。我们可以根据组件身上的$route获取当前独有的信息，通过路由路径判断Footer显示与隐藏直接的写法，就是在App.vue中，使用组件标签时，里面写上下面这行代码。但如果使用这种方法，我们网站的页面较多，后面写的代码就会很长，很不方便，所以就有第二种方法。假设有个组件叫tcsnavba，在有的页面上要隐藏，有的要展示。
前端Vue中常用rules校验规则
yebanliyu的博客
12-16 1708
本人在利用vue编写前端页面时，根据官方文档的介绍，需要自定义校验规则，无奈本人能力有限，查询资料发现，有一个大佬之前总结过相关文档，特在此记录一下。 element-ui 关form表单验证的教程 卖坚果的怪叔叔 关于 前端Vue中常用rules校验规则 // 1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ cal...
vue 控制元素的显示和隐藏
热门推荐
qq_61726905的博客
09-15 1万+
控制元素的显示和隐藏 ，然后在 js代码中 设置 showButton 的默认值 为 false ，就是刚启动的时候，默认是不显示的，后面如果想要显示这个 按钮 ，就直接设置 showButton=true;v-if和v-show属于Vue的内部常用的指令，指令的职责是当表达式的值改变时把某些特殊的行为应用到DOM上。比如想要隐藏 上面这个 按钮 那么给这个 div 加一个 v-show 的属性，名字写自己的。v-if指令与v-show指令都可以根据值动态控制DOM元素显示隐藏，
vue前端通过判断一个值,更新另一个值的结果
monicateacat的博客
05-09 373
通过对该列表所有行的判断的结果,对我们的"结果"字段进行更新。如方法所示,如果"判断"全为"合格","结果"为"通过",如果有一个不合格,结果就是不通过,否则"结果"就是"不通过".
Vue.js 中v-for和v-if一起使用，来判断select中的option为选中项【开发记录】
单枪匹码
12-11 4601
1、刚写了一篇有关地址管理页面的总结，其中有如何判断多个radio中哪一个radio被checked和实现点击radio以后选中或取消，有兴趣的可以看下：判断多个radio中哪个被checked，网上有很多Vue.js使用v-for和v-if在多个select中判断哪一个option被选中的例子，但是不是特别的详细，其实select和radio原理上实现方式是大体是相同的，趁着手热，下面就来继续做...
vue3 语法糖如何自定义校验规则
05-30
要自定义校验规则，可以使用 Vue 3 中提供的 `v-model` 指令的 `v-bind` 和 `v-on` 缩写语法糖，结合自定义校验方法实现。具体步骤如下： 1.在需要绑定数据的元素上使用 `v-model` 指令，并使用 `v-bind` 缩写语法糖将数据绑定到 `value` 属性上。 ```html <input v-model="username" /> ``` 2.在 `data` 选项中定义需要绑定的数据及其初始值。 ```javascript data() { return { username: '' } } ``` 3.使用 `v-on` 缩写语法糖绑定事件，当用户输入数据时触发校验方法。 ```html <input v-model="username" v-on:input="validateUsername" /> ``` 4.在 `methods` 选项中定义校验方法，并在其中实现自定义的校验规则。 ```javascript methods: { validateUsername() { // 自定义校验规则 if (this.username.length < 6) { // 校验不通过，设置错误信息 this.$set(this.errors, 'username', '用户名长度不能少于 6 个字符') } else { // 校验通过，清除错误信息 this.$delete(this.errors, 'username') } } } ``` 其中，`this.errors` 是一个对象，用于存储所有的错误信息。在校验方法中，通过 `this.$set` 方法给 `errors` 对象添加一个 `username` 属性，并设置错误信息。如果校验通过，使用 `this.$delete` 方法删除 `errors` 对象中的 `username` 属性，清除错误信息。 注意：在使用 `v-model` 指令绑定数据时，需要提前定义数据的初始值，否则会出现无法绑定数据的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值