Element UI 表单【详解】-- 表单校验，表单元素排列在一行，常用表单元素等-阿里云开发者社区

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

2024-07-01 7

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 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 标签上

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

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