function validateArrayNotEmpty(rule, value, callback) { if (Array.isArray(value) && value.length > 0) { callback(); // 校验通过 } else { callback(new Error('数组不能为空')); // 校验不通过,并返回错误信息 } } 3. 应用校验函数 在el-form的验证规则中调用这个函数,以...
2.<el-form>在v-for的嵌套里, 这种情况是这样的, 拿我的例子来说,我的页面用v-for 渲染了2个form, ref分别是form-0, form-1. 当调试的时候我发现,当前页面的$refs里有2个,而且每个form 都是一个Array(1)的数组,这时候,数组当然没有validate方法,因此报错, image.png 此时的解决办法就直接取数组的第...
</el-form> </template> <script> export default { data() { return { form: { array: [] }, rules: { array: [ { validator: this.validateArray, trigger: 'blur' } ] } }; }, methods: { validateArray(rule, value, callback) { if (Array.isArray(value) && value.length > 0) { ...
type: 'array', message: '请选择日期区间', fields: { 0: { type: 'string', required: true, trigger: 'change', message: '请选择开始日期' }, 1: { type: 'string', required: true, trigger: 'change', message: '请选择开始日期' } }, }, { validator: validateTimeRange2, trigger: 'c...
// el-form(ref="elForm" :model="model" :rules="rules" v-bind="$attrs" v-on="$listeners") mounted() {const methods = [ "validate", "validateField", "resetFields", "clearValidate" ]; methods.forEach(method => (this[method] = this.$refs.elForm[method])); ...
formRules: { //其他字段的校验规则 dataList: [ { type: 'array', required: true, message: '请至少添加一条数据', trigger: 'blur' }, //其他校验规则 ] }, dataList: [ //初始的数据数组 ] }; } ``` 3.当点击提交按钮时,可以通过调用el-form的validate方法进行校验。 ```html <el-button...
submitForm (formName) { this.$refs[formName].validate((valid) => { if (!valid) return console.log('未通过校验') }) }, addItem () { this.form.activities.push({ name: '', content: '' }) }, removeItem (index) { this.form.activities.splice(index, 1) ...
ruleValidate:{}//整个form表单的校验规则} }, computed:{//这里由于根据baseForm.status的不同取值 动态更新其他表单项的校验规则,所以放在computed里监听ruleList() {return[ { required:this.baseForm.status === '2'?false:true, type:'array', message:'活动一和活动二必须二选一', trigger:'blur'},...
return {dynamicValidateForm: { domains: [{ value:'' }], email: ''}}; }, ... } </script> 如上,对于单个表单域,可以直接对表单域的rules参数进行配置,来实现格式验证,这种方法一般比较适用于格式验证比较简单的情况。 如果需要进行验证的字段比较多,或者验证规则比较复杂,那么最好使用上边对整个表单进行...
ruleValidate:{} //整个form表单的校验规则 } },computed:{ //这⾥由于根据baseForm.status的不同取值动态更新其他表单项的校验规则，所以放在computed⾥监听 ruleList() { return [{ required:this.baseForm.status === '2'?false:true, type:'array', message:'活动⼀和活动⼆必须⼆选⼀', ...