vue elementui 自定义表单触发验证
表单验证 rules内触发事件trigger只有一下几种:比如 阁下遇到没有这些触发事件的时候,或者自定义封装组件 需要正则验证,就不能用上边的触发事件类似于这种自己封装的表单时间段组件按照正常表单验证代码就是:HTML:<el-form-item label="呼叫时间段:" prop="outboundTime">(最小可选呼叫时间段为1小时,双击已选中时间段可取消选择)<b
·
表单验证 rules内触发事件trigger只有一下几种:
比如 阁下遇到没有这些触发事件的时候,或者自定义封装组件 需要正则验证,就不能用上边的触发事件
类似于这种自己封装的表单时间段组件
按照正常表单验证代码就是:
HTML:
<el-form-item label="呼叫时间段:" prop="outboundTime"
>(最小可选呼叫时间段为1小时,双击已选中时间段可取消选择)<br/>
<div class="timeul">
<drag-weektime
v-model="outboundTime"
:data="weektimeData"
@on-clear="clearWeektime"
/>
</div>
</el-form-item>
<el-form-item style="margin-top: 20px">
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">
创建任务
</el-button>
</el-form-item>
JS:
data() {
return {
rules: {
outboundTime: [
{ required: true, message: '请选择呼叫时间段', trigger: 'change' }
],
},
};
},
submitForm(formName) {
var createParams = {
accountId: this.name,
calleeIds: this.calleeIds,
reMoveStatus: str,
...this.ruleForm,
};
this.$refs[formName].validate((valid) => {
if (valid) {
createTask(createParams).then((res) => {
if (res.code == 200) {
this.taskId = res.id;
this.$message({
type: "success",
message: "创建成功",
});
this.isNewly_ = false;
}
});
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
这样写的话 不选择时间段会有正则提示,但是重新选择时间段之后,提示不会消失 valid还是为false
所以我的小小解决办法:
给他单独增加ref
<el-form-item label="呼叫时间段:" ref='outTimes' prop="outboundTime"
>(最小可选呼叫时间段为1小时,双击已选中时间段可取消选择)<br />
<div class="timeul">
<drag-weektime
v-model="outboundTime"
:data="weektimeData"
@on-clear="clearWeektime"
/>
</div>
</el-form-item>
// JS代码:
submitForm(formName) {
var createParams = {
accountId: this.name,
calleeIds: this.calleeIds,
reMoveStatus: str,
...this.ruleForm,
};
this.$refs[formName].validate((valid) => {
if(this.ruleForm.outboundTime!==undefined){
//或者不为null的时候,就将他的正则提示清除,将valid的值改为true就OK
this.$refs['outTimes'].clearValidate()
valid = true
}
if (valid) {
createTask(createParams).then((res) => {
if (res.code == 200) {
this.taskId = res.id;
this.$message({
type: "success",
message: "创建成功",
});
this.isNewly_ = false;
}
});
}
});
},
这样就OK 比较简单粗暴 O(∩_∩)O哈哈~
更多推荐
已为社区贡献2条内容
所有评论(0)