el-form 中的表单验证

el-form 中的表单验证

<el-form :model="ruleForm" :rule="rules" ref="ruleForm">
    <el-form-item label="活动名称" prop="name">
    	<el-input v-model="ruleForm.name" />
    </el-form-item>
</el-form>
<script>
export default {
    data() {
        let validateUsername = (rule, value, cb) => {
            if (value) {
                cb()
            }
            cb(new Error('输入不能为空'))
        }
        return {
            ruleForm: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' }, // 用法一
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } // 用法二
                ]，
                name1: [{ validator: validateUsername, trigger: 'blur' }]  // 用法三
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                // ...
            })
        }
    }
}
</script>

解析

属性解析

• prop

  表单域的 model 字段，在使用 validate，resetFields 方法的情况下，该字段为必填字段

用法解析

• 用法一

  想要实现 失去焦点即触发 的功能，则必须要required: true，因为这样就好像给了它一个前提条件

• 用法二

  与用法一相比，这个就不需要required: true了，因为 min 和 max 就是一个条件

• 用法三

  这样可以实现不加required: true就 失去焦点即触发 的功能

十分注意

• 是required