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

el-form 表单

<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 标签上

1. 添加prop属性，值为字段名  prop='name'
2. 添加字段校验规则

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

对整个表单数据进行校验 validate

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

对单个表单数据进行校验 validateField

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

清除表单校验 clearValidate

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

 校验规则详解  rules

若只有一条校验规则，绑定对象即可

: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();
    }
}

异步校验

如访问接口，判断用户名是否已存在。  checkUsername为请求后端接口

required属性——是否必填

• true 表单元素的值不能为空，表单元素前会有红色*号标记

• false 表单元素的值可以为空

message属性——校验失败后的提示信息

触发校验后，若校验失败，提示信息会在表单元素下方显示

trigger属性——校验触发时机

trigger属性用于指定校验触发时机，但是并不是所有的验证项都可以被这样触发

• 'blur' 表单元素失去焦点时触发校验
• 'change' 表单元素的值发生变化时触发校验

type属性——值的类型

• string: 字符串（默认值）
• number: 数字
• boolean: 布尔值
• method: 函数
• regexp: 正则表达式
• integer: 整数
• float: 浮点数
• array: 数组
• object:对象
• enum: 枚举类型，可以参考百度资料-枚举类型
• date: 日期类型
• url: URL类型，如 https://www.baidu.com/
• hex: 文件格式类型，如  :020000040000FA 
• email: 邮箱类型，如 3652452@qq.com
• any: 任意类型

pattern属性——正则校验

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

更多常用正则表达式见链接  https://blog.csdn.net/weixin_41192489/article/details/113618913

表单元素排列在一行

添加  :inline="true" 即可

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

 

常用表单元素

所有表单元素，都要使用  el-form-item 标签包裹

单行输入框

<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-checkbox-group v-model="formData.hobby">
    <el-checkbox v-for="item in hobbyList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
</el-checkbox-group>

hobbyList: [
    {
        label: "编程",
        value: '1'
    },
    {
        label: "读书",
        value: '2'
    },
]

 

开关

 

<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));
    }
},

选择时间

 selectableRange限制可选时间范围

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

选择日期范围

 unlink-panels 用于解除左右日期面板的联动

<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>