element-ui 表单验证方法

表单验证使用的方法

<template>
    <div class="app">
        <el-card>
            <div slot="header">
                <span>注册表单</span>
            </div>
            <el-form
                size="small"
                label-width="80px"
                :model="{ formData }"
                :rules="rules"
                ref="formEl">
                <el-form-item label="账户" prop="formData.account">
                    <el-input
                        v-model="formData.account"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item label="令牌" prop="formData.token">
                    <el-input
                        v-model="formData.token"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item
                    v-for="(_, index) in formData.hobbies"
                    :key="index"
                    :label="`兴趣${index + 1}`"
                    :prop="`formData.hobbies`"
                    :rules="[{
                        validator: (row, value, callback) => {       
                            print(row.fullField) // row.fullField 可以拿到 prop 对应的值
                            print(value) // value 可以拿到 formData.hobbies 这一层对应的值
                            if (value.every(item => item === '') && index === 0) { // 若兴趣的每一项都为空，只在第一行显示报错信息
                                callback(createError('请至少输入一项兴趣爱好!')) // 模版语法里没有 new Error() 方法
                            } else {
                                callback() // 若校验通过，直接执行 callback，校验不通过 callback(new Error('错误提示信息'))
                            }
                        },
                        trigger: [] // 如果是 blur 等操作，只会触发当前 el-form-item 组件报错信息显隐，不会对触发兄弟组件的验证事件，也就不会显隐兄弟组件的报错信息
                    }]">
                    <el-input
                        v-model="formData.hobbies[index]"
                        clearable>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-plus" @click="formData.hobbies.push('')" round>添加爱好</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="save()">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        表单数据：{{JSON.stringify(formData)}}
    </div>
</template>

<script>
export default {
    name: 'App',
    data: ()=> ({
        formData: {
            account: '',
            token: '',
            hobbies: ['']
        },
        rules: {
            'formData.account': [{
                required: true, // 用来在表单 label 前显示红色星号
                validator: (_, value, callback) => {
                    if (!value) {
                        callback(new Error('请填写账户!'))
                    } else {
                        callback()
                    }
                }, trigger: ['blur'] // 在失焦的时候出发校验，还可以选择 change 等事件钩子，如果该字段值为 []，则只会在调用 validate 方法时触发
            }],
            'formData.token': [{
                required: true,
                validator: (_, value, callback) => {
                    if (!value) {
                        callback(new Error('请填写令牌!'))
                    } else {
                        callback()
                    }
                }, trigger: ['blur', 'change']
            }]
        }
    }),
    methods: {
        print() {
            console.log(...arguments)
        },
        createError(str) {
            return new Error(str)
        },
        save () {
            // 主动触发表单校验
            this.$refs.formEl.validate(e => {
                // 触发校验
                if (!e) { // e 拿到的仅仅是 true or false
                    // 校验不通过时的操作
                    return
                }
            })
        }
    }
}
</script>

<style lang="scss">
.app {}
</style>