elementui: 表单规则校验

1. 校验和自定义校验

这里以vkit为示例

            <vk-form ref="form" :model="customForm" :rules="customFormRules" label-width="123px">
                <vk-form-item label="客服电话号码" prop="tel" >
                    <vk-input class="ipt"   v-model="customForm.tel" placeholder="请输入客服电话号码"></vk-input>
                </vk-form-item>
                <vk-form-item label="" prop="confirmTel" >
                    <vk-input class="ipt"  v-model="customForm.confirmTel" placeholder="请再输一次电话号码，二次确认"></vk-input>
                </vk-form-item>
                <vk-form-item label="" >
                    <!-- <vk-input class="ipt" v-model="customForm.confirmTel" placeholder="请再输一次电话号码，二次确认"></vk-input> -->
                    <vk-button class="btn" type="primary" @click="handleSumbit">提交</vk-button>
                </vk-form-item>
            </vk-form>

记住customForm和customFormRules必须是同名

data() {
        const cb = (rule, value, callback) => {
            // 使用 JavaScript 验证中国手机号码和座机号码 - 座机 - 区号必填
	        if (/^0[1-9][0-9]{1,2}-[2-8][0-9]{6,7}$/.test(value) || /^0[1-9][0-9]{1,2}[2-8][0-9]{6,7}$/.test(value)) {
	            callback();
	        } else {
	            callback(new Error('电话号码需要输入区号)'));
	        }
        };
        return {
            customForm: {
                tel: '',
                confirmTel: ''
            },
            rpkPoster: '',
            rpkName: '',
            customFormRules: {
                tel: 
                [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    {
                        validator: cb, // 自定义
                        trigger: 'blur'
                    }
                ],
                confirmTel: [
                    {
                        required: true,
                        message: '请再次请输入手机号',
                        trigger: 'blur'
                    },
                    {
                        validator: cb, // 自定义
                        trigger: 'blur'
                    }
                ]
                
            }
        };
    }

获取全部验证的结果

this.$refs.form.validate((result) => {
                if (result) {
                    // this.$message.success('验证通过');
                    console.log('send ajax');
                } else {
                    // this.$message.error('表单填写有误!请检测表单!');
                }
            });

2. 校验一次后，修改值后怎么自动触发校验某个字段
   

实现： 给 el-select 绑定 change 监听，当下拉选择变化的时候，通过事件 出发 form 的validateField 方法，进而触发 input 的校验

sinfleSubmitForm () {
      // addUser
      this.$refs['addFormRef'].validateField('new_cover', (valid) => {
        if (valid) {
          // alert('submit!');
          return 
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

在比如这里例子： 链接

3. 对动态表单校验，对校验函数传递自定义参数

                       <tr v-for="( item , index) in formData.keywords" :key="index">
                                    <td>
                                    
<!-- 对动态下的表单元素套一个 <element-form> <element-form-item> </element-form-item> </el-form>  -->

                                        <vk-form :ref="'formkey' + index" :model="item"  >
                                        <!-- @blur="validateKeyword(item.name, index)" -->
                                            <!-- @input="handleKeywordInput(item.name, index)" -->
                                            <!-- @blur="handleBlurInput(item.name, index)" -->
                                            <vk-form-item label="" prop='name' :rules="[{validator: valiKeyword,trigger: 'blur'}]"  >
                                                            <vk-input
                                                                v-model="item.name"
                                                                size="small"
                                                                placeholder="请输入关键词"
                                                            ></vk-input>
                                            </vk-form-item>
                                        </vk-form>

                                    </td>
                                    <td>
                                        <vk-select v-model="item.type" @change="handleSelect(item.example, index)" size="small">
                                            <vk-option
                                                v-for="item in keywords"
                                                :key="item.type"
                                                :label="item.name"
                                                :value="item.type"
                                            ></vk-option>
                                        </vk-select>
                                    </td>
                                    <td>
<!-- 对单项校验， 会调中传递自定义参数 -->

                                        <vk-form :ref="'formexample' + index" :model="item"  >
                                            <vk-form-item label="" prop='example' :rules="[{ validator: ((rule, value, callback) => { valiExam(rule, value, callback,index) }), trigger: 'blur' }]"  >
                                            <!-- @input="handleExampleInput(item.example, index)" -->
                                            <vk-input
                                                v-model="item.example"
                                                size="small"
                                                placeholder="请输入示例"
                                            ></vk-input>
                                            </vk-form-item>
                                        </vk-form>

                                        <!-- @blur="validateExample(item.example, index)" -->
                                    </td>
                                    <td>
                                        <vk-button
                                            type="primary"
                                            size="small"
                                            icon="el-icon-plus"
                                            circle
                                            @click="handleAdd(item)"
                                        ></vk-button>
                                        <vk-button
                                            v-if="index !== 0"
                                            type="danger"
                                            size="small"
                                            icon="el-icon-delete"
                                            circle
                                            @click="handleDel(index)"
                                        ></vk-button>
                                    </td>
                                    <!-- </el-form> -->
                                </tr>

5. 手动触发校验

   触发对整个表单的验证：this.$refs.userForm.validate();
   触发对表单部分字段的验证：this.$refs.userForm.validateField("password");