将 CheckboxGroup 和 Checkbox 组件集成在 Form 里完成一个数据校验的示例

示例如下，部分代码省略：

 <i-form ref="form" :model="formValidate" :rules="ruleValidate">
            <i-form-item label="用戶名" prop="name">
                <i-input v-model="formValidate.name"></i-input>
            </i-form-item>
            <i-form-item label="邮箱" prop="email">
                <i-input></i-input>
            </i-form-item>
           <i-form-item label="多选" prop="multiple$2">
               <p>
                   <i-checkbox v-model="formValidate.multiple$1" trueValue="0" falseValue="1">单独使用的多选组件</i-checkbox>
                   值{{formValidate.multiple$1}}
               </p>
                <span>组合使用的多选组件</span>
               <i-checkbox-group v-model="formValidate.multiple$2" @on-change="handleChange">
                   <i-checkbox label="option1">选项 1</i-checkbox>
                   <i-checkbox label="option2">选项 2</i-checkbox>
                   <i-checkbox label="option3">选项 3</i-checkbox>
               </i-checkbox-group>
               <span>   多选的值{{formValidate.multiple$2.toString()}}</span>

           </i-form-item>
        </i-form>
复制代码

验证规则：

 data() {
            const validateMultiple = (rule, value, callback) => {
                if (value.length<2) {
                    return callback(new Error('不少于两项'));
                }else {
                    callback();
                }

            };
            return {
                formValidate: {
                    name: '',
                    email: '',
                    multiple$1: '5',
                    multiple$2: ['option1', 'option2'],
                },
                ruleValidate:{
                    name:[
                        {required:true,message:'用户名不能为空', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '邮箱不能为空', trigger: 'blur'},
                        {type: 'email', message: "邮箱格式不正确", trigger: 'blur'}
                    ],
                    multiple$2: [
                        {validator:validateMultiple, trigger: 'change'}
                    ]
                },
            }
        },
复制代码

转载于:https://juejin.im/post/5d06e5686fb9a07ecd3d5bba