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
: 文件格式类型,如 :020000040000FAemail
: 邮箱类型,如 3652452@qq.comany
: 任意类型
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>