Element UI 表单【详解】-- 表单校验，表单元素排列在一行，常用表单元素等

<el-form ref="formRef" :model="formData" label-width="80px" size="mini">
    <el-form-item label="姓名"
                  prop='name'
                  :rules="{ required: true, message: '不能为空'}"
    >
        <el-input v-model="formData.name" style="width: 200px"></el-input>
    </el-form-item>
    <el-form-item label="性别">
        <el-select v-model="formData.gender" placeholder="请选择">
            <el-option
                    v-for="item in genderList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
            ></el-option>
        </el-select>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="clear">重填</el-button>
    </el-form-item>
</el-form>

this.$refs.formRef.resetFields();

    <el-form-item label="姓名"
                  prop='name'
                  :rules="{ required: true, message: '不能为空'}"
    >

save() {
    this.$refs.formRef.validate((valid) => {
        if (valid) {
            alert('通过了表单校验，可以保存啦！')
        }
    });
}

this.$refs.formRef.validateField('name',err  => {
    if(!err){
        alert('姓名校验通过啦！')
    }
})

       this.$nextTick(() => {
          this.$refs.formRef.clearValidate();
        });

:rules="{ required: true, message: '不能为空'}"

:rules="[
      { required: true, message: '请输入活动名称', trigger: 'blur' },
      { type: 'date', required: true, message: '请选择时间', trigger: 'change' },
      { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' },
      { pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '只能输入汉字', trigger: 'change' }
      ]"

{ validator: checkAge, trigger: 'blur' }

const checkAge = (rule, value, callback) => {
    if (value < 18) {
        callback(new Error('必须年满18岁'));
    } else {
        callback();
    }
}

:rules="[{ pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '只能输入汉字', trigger: 'change' }]"

 <el-form ref="formRef" :model="formData" label-width="80px" size="mini" :inline="true">

<el-input v-model="formData.name" style="width: 200px"></el-input>

<el-input type="textarea" v-model="formData.remark"></el-input>

<el-select v-model="formData.gender" placeholder="请选择">
    <el-option
            v-for="item in genderList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
    ></el-option>
</el-select>

<el-radio-group v-model="formData.gender">
    <el-radio v-for="(item,index) in genderList" :key="index" :label="item.label"></el-radio>
</el-radio-group>

formData: {
    hobby: []
},

<el-switch v-model="formData.show"></el-switch>

<el-date-picker
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        v-model="formData.birthday"
        type="date"
        placeholder="选择日期">
</el-date-picker>

pickerOptions: {
    disabledDate(time) {
        //此条为设置禁止用户选择今天之前的日期，包含今天。
        // return time.getTime() <= (Date.now()-(24 * 60 * 60 * 1000));
        //此条为设置禁止用户选择今天之前的日期，不包含今天。
        return time.getTime() <= (Date.now()-(24 * 60 * 60 * 1000));
    }
},

<el-time-picker v-model="formData.time" placeholder="选择时间"
                value-format="HH:mm:ss"
                :picker-options="{selectableRange: '18:30:00 - 20:30:00'}"
>

<el-date-picker
        unlink-panels
        value-format="yyyy-MM-dd"
        v-model="formData.validDate"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
</el-date-picker>