首先是固定校验规则,但是表单组件是动态生成的,例如:在表单或者表格里有“增加”功能,增加一行,给新生成的表单组件添加校验规则。 第二类就是组件固定,但是校验规则会随着其他条件的变化而变化,例如:基本的最常见的例子是确认密码的校验,判断第二次输入的密码与第一次输入是否一致。 最后,比较复杂的就是以上两类情况...
1. 普通输入验证 <el-form-item label="活动名称" prop="name"> <!-- validate-event属性的作用是: 输入时不触发表单验证.提交时再验证,你也可以设置成动态验证 --> <el-input v-model="registData.name" :validate-event="false"></el-input> </el-form-item> rules: { // 表单验证规则 name: ...
1. 表单中的部分el-form-item 的label都是从接口拿到的,需要遍历进行动态渲染。 2. 需要给每个el-form-item加上校验至少是必填校验 2. 需要给每个el-form-item加上校验至少是必填校验 3. 有的el-form-item不需要校验,也不是从接口获取得 2、查阅相关文档([element官网](https://element.eleme.cn/#/zh-C...
"change"、"blur"和"submit"。当trigger的值为"change"时,表单会在输入框的值发生改变时立即触发校验。当trigger的值为"blur"时,表单会在输入框失去焦点时触发校验。当trigger的值为"submit"时,表单会在提交表单时触发校验。 2.2 其他相关参数 2.2.1 type: 用于验证数据类型 字符串类型 string: 字符串类型(默认...
实现表单项动态必填功能,目前看到方法有两种1、在必填的 el-form-item 写两个一样的,一个有 rules 一个没,然后用 v-if 去动态判断2、现在要说的是方法2...
3.根据条件判断表单里的 某一项动态变化是否必填; 示例如下: 效果如下 踩坑之路: 本打算通过动态判断prop的值来进行动态校验,但是这样*虽然会根据前面的条件而动态显示隐藏,但是rules中的验证不生效 以上方法只是动态修改了props属性,而并未出发表单的重新渲染,验证器中的prop属性并未更新,还是初次渲染时的空值,知道...
elementui表单验证动态修改required,并且实时更新是否展示报错提示 最近在开发一个功能,一个表单里面有输入框,每个输入框上面有一个switch开关,开启则必填,不开启的话则该输入框的值可以为空。 我把校验规则写在了el-form-item上面: <el-form-item label="姓名" prop="name" :rules="[{ required: Number(temp...
场景:大部分情况下,我们对于表单的验证,都是基本是否必填,即:required: true。但是,存在一些情况我们需要进行动态验证, 比如: 正则动态验证 自定义方法验证 一、动态正则验证 varrules={phone:[{pattern:/^1[3-9](\d{9})$/,message:'请输入正确的手机号',trigger:['change']},{max:11,message:'请输入11...
第六种 动态验证-多个输入框验证 第一种情况 每个输入框单独验证 在样式很好控制的情况下,循环生成多个<el-form-item>,单独验证 代码语言:javascript 复制 <el-form-item:label="index==0?'关联写字楼':''":prop="'project.' + index + '.project_id'":rules="{required: true, message: '请选择关联...
现在遇到的问题:在一个表单里,有A、B 2个select下拉框,当A下拉框里面为某个特定的值的时候B下拉框为必填项,否则为可选项。我试过在rules里面这样写: rules:{ overseasStudents:[{ required:!this.overseasStatus,message:'请选择留学人员',trigger:'blur' }] } 通过操作this.overseasStatus这个的布尔值来实现...