elementui自定义form组件校验,解决不触发校验事件
el-form 绑定model 并添加rules，el-form-item绑定prop属后，默认的el-input或者el-select 值变更时候可以通过表单校验
el-form ref="form5" :model="form" :rules="rules"
el-form-item label="name" prop="name"
el-input v-model="form.name" /
/el-form-item
rules: {
name: [ { required: true , message: "必须填写", trigger: "blur"}]
}
自定义的组件比如图片上传之类不触发，
可以通过值变更时候触发上级El-Form-Item校验,吧value传进去即可,如下：把文件上传返回的url值传递到校验对象上去
handleUploadSuccess(res, file){
this.dispatch("ElFormItem","el.form.change",[res.url])
}
dispatch是 \element-ui\src\mixins\emitter.js的函数，这个可以递归找到最近的父节点方法，并触发事件；
如果需要this用法，可以如下方式引入
import emitter from 'element-ui/src/mixins/emitter';
mixins:[emitter],
props: {//和props同级
.....
Vue处理表单校验
1、vue使用element-ui的form表单验证
问题描述：第一次点击新增时正常，第二次新增打开弹窗后由于表单内容为空，出现验证这种情况。
解决 ： this.$refs.staffForm.resetFields();//等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields()，去除验证（clearValidate），（resetField表单重置）
//打开弹窗的新增方法
addStaff() {
this.staffVisible = true;//弹窗打开
this.$nextTick(()={
this.$refs.staffForm.resetFields()
this.$refs.staffForm.clearValidate()
});
},
vue elementui el-form rules动态验证的实例代码详解
一、介绍
简介：在使用elementUI
el-form
中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。
图片介绍：
1、在用户选择单选或多选时会有A,B,C,D,E五个选项
2、在用户选择简答题时只会题干，答案以及解析选项（主要是通过v-if来进行判断）
问题引入：当用户选择不同的题库时会产生不同的form表单选项，这个时候在进行表单提交验证的时候就需要根据不同试题类型进行判断，这个时候就需要两个rules来动态进行表单校验。
解决方法：在页面加载的时候在computed方法中进行动态判断直接返回赋值。
代码介绍：
//
elementui信息
el-form
:model="addQueTable"
ref="addQueTable"
:rules="addQueRulesList"
el-form
//
data中定义rules
updateQusRulesSel:[];
updateQusRules:[];
//
computed方法
computed:
{
//
this.updateQusTable.showSelect自己定义的标识
updateQusRulesList:
function()
{
if
(this.updateQusTable.showSelect)
{
return
this.updateQusRulesSel;
}
else
{
return
this.updateQusRules;
}
}
总结：在computed中进行值绑定，当该表单显示的时候就会触发(一开始是隐藏的)，如果一开始页面加载的时候就触发会无法进行值判断，从而报错。其实能解决问题，通过该种方法。
二、最简单解决方法
在el-form中定义的rules检验字段，如果你的rules中有字段通过v-if进行隐藏，rules是不会对隐藏的字段选项进行判断，只要定义一个完整的rules就行，v-if隐藏的部分不会进入校验方法中。
把简单的问题复杂化了！！！！！
感谢该用户：
总结
以上所述是小编给大家介绍的vue
elementui
el-form
rules动态验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:vue
elementUI
table
自定义表头和行合并的实例代码vue+elementUI实现表单和图片上传及验证功能示例如何利用vue+vue-router+elementUI实现简易通讯录基于elementUI使用v-model实现经纬度输入的vue组件详细讲解如何创建,
发布自己的
Vue
UI
组件库
vue：ElementUI表格控件数据校验
1.在el-form标签中定义:rules="rules";ref="reference"
2.在el-form-item定义prop="name";
3.在选项data中定义rules校验规则;
4.在提交方法中检查用户行为
表单：
el-form
:model="ruleForm"
:rules="rules" //规则rules
ref="ruleForm"
.......
组件：
CreateModal
ref="CM"
:url="this.url"
:rules="formRules" //规则formRules
:form-items="this.formItems"
@submitData="submitData"
/
el-form自定义校验
rules:{
name: [
{ required: true, trigger: 'blur', message: '请输入名称' }
]
}
data() {
var existPhoneRule = (rule, value, callback) = { // 手机号唯一性校验
let regx = /^1[0-9]{10}$/;
if (!value) {
return callback(new Error('请输入手机号'));
}
if (!regx.test(value)) {
return callback(new Error('手机号格式错误'));
}
};
return {
rules:{phone: [{ validator: existPhoneRule, required: true, trigger: 'blur' }]}
}
}
data() {
var existPhoneRule = (rule, value, callback) = { // 手机号唯一性校验
let paramas = {}
if (!value) {
return callback(new Error('请输入手机号'));
}
existPhone(paramas).then(res = {
if (res.code === '200') {
callback();
} else {
callback(new Error(res.message));
}
})};
return {
rules:{phone: [{ validator: existPhoneRule, required: true, trigger: 'blur' }]}
}
}
vue 自定义规则校验 element设置正则表达式
表单验证时，设置密码，和重新输入密码 判断在两个密码是否相等
data() {
// 自检测
const showPwa = (ru, value, cb) = {
if (value !== this.regForm.password) {
cb(new Error('密码不一致，请重新输入'))
} else {
cb()
}
}
return {
regForm: {
username: '',
repassword: '',
password: ''
},
regFormRules: {
//表单验证
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' },
//设置正则表达式 pattern
{ pattern: /^[a-zA-Z0-9]{1,10}$/, message: '字母数字、长度 1-10', trigger: 'blur' }
],
repassword: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ pattern: /^\S{6,15}$/, message: '非空字符串、长度 6-15', trigger: 'blur' },
{ validator: showPwa, trigger: 'blur' }
],
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' },
{ pattern: /^\S{6,15}$/, message: '非空字符串、长度 6-15', trigger: 'blur' }
]
}
}
},