elmentui 表单验证问题
2024-10-21 11:42:14
<template>
<div class="container">
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px">
<el-form-item label="礼包名称" prop="name">
<el-input v-model.trim="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="礼包金额(元)" prop="money">
<el-input-number
v-model="ruleForm.money"
:min="1"
controls-position="right"
style="width: 200px"
></el-input-number>
</el-form-item>
<el-form-item label="倒计时时间" prop="countDown">
<el-input-number
v-model="ruleForm.countDown"
:min="1"
controls-position="right"
style="width: 200px"
></el-input-number>
</el-form-item>
<el-form-item :rules="[
{ minTime: ruleForm.available_after, validator: validateRate, trigger: 'blur' },
{required: true, message: '上线时间', trigger: 'blur'},
]" label="上线时间" prop="available_after">
<el-date-picker
v-model="ruleForm.available_after"
format="yyyy-MM-dd HH:mm"
placeholder="选择上线时间"
size="small"
type="datetime"
value-format="timestamp"
></el-date-picker>
</el-form-item>
<el-form-item :rules="[
{ maxTime: ruleForm.available_before, validator: validateRate, trigger: 'blur' },
{required: true, message: '下线时间', trigger: 'blur'},
]" label="下线时间" prop="available_before">
<el-date-picker
v-model="ruleForm.available_before"
format="yyyy-MM-dd HH:mm"
placeholder="选择下线时间"
size="small"
type="datetime"
value-format="timestamp"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
money: '',
countDown: 1,
available_after: '',
available_before: ''
},
rules: {
name: [
{required: true, message: '请输入礼包名称', trigger: 'blur'},
],
money: [
{required: true, message: '请输入礼包金额', trigger: 'blur'},
],
countDown: [
{required: true, message: '请输入倒计时时间', trigger: 'blur'},
]
}
}
},
mounted() {
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
validateRate(rule, value, callback) {
console.log(this.$refs.ruleForm.fields)
// this.$refs.ruleForm.fields[0].validateMessage ='error'
console.log(this.ruleForm.available_before <= this.ruleForm.available_after)
if (this.ruleForm.available_before === '' && this.ruleForm.available_after === '') {
callback(new Error('请选择时间'))
} else if (this.ruleForm.available_before == '' && this.ruleForm.available_after || this.ruleForm.available_after == '' && this.ruleForm.available_before) {
callback()
} else if (this.ruleForm.available_before <= this.ruleForm.available_after) {
callback(new Error('最小功率不能大于最大功率'))
} else {
if(this.$refs.ruleForm.fields[3].validateMessage){
this.$refs.ruleForm.fields[3].clearValidate();
}
if(this.$refs.ruleForm.fields[4].validateMessage){
this.$refs.ruleForm.fields[4].clearValidate();
}
callback();
}
}
},
computed: {}
}
</script>
主动触发错误提示操作
this.$refs.ruleForm.fields[4].validateMessage='';
//移除该表单项的校验结果
this.$refs.ruleForm.fields[4].clearValidate();
最新文章
- Linux软件安装
- UVALive 7139 Rotation（矩阵前缀和）（2014 Asia Shanghai Regional Contest）
- 411. Minimum Unique Word Abbreviation
- php高版本不再使用mysql_connect()来连接数据库
- Spring Remoting: Hessian--转
- jQuery的事件click
- AC日记——神奇的幻方 洛谷 P2615（大模拟）
- Solr学习笔记之3、Solr dataimport - 从SQLServer导入数据建立索引
- LightOJ 1138 Trailing Zeroes (III) 打表
- Linux CPU数量判断，通过/proc/cpuinfo.
- fastboot，bootloader,recovery
- css2--背景
- Linux视频主要概述
- CF 455D. Serega and Fun [分块 deque]
- 转：Spring历史版本变迁和如今的生态帝国
- C语言复习6_doWhile循环
- maven 分隔环境
- Python_序列化和反序列化模块
- Sqlite之事务
- c# mac地址 和http://xx.xx.xx/ 正则表达式匹配