vue.js +element ui表单添加和验证功能

1.表单（一个添加弹出框），注意删除线这几个地方 <el-form :model=“ruleForm” ref=“ruleForm” :rules=“rules” > 和里面的 prop=“number”， ruleForm是添加封装的数据

2.在 export default {} 中定义rules ，验证要显示的错误信息，

//添加数据验证 ，这个rules 是在data:return {} 中去定义的
rules:{
name: [
{
required: true,
message: “请输入停车场名称，不能为空”,
trigger: “change”
}
],
number: [
{
required: true,
message: “请输入车位编号，不能为空”,
trigger: “blur”
}
],
isChargingPile: [
{
required: true,
message: “请选择充电桩，不能为空”,
trigger: “change”
}
],
openStatus: [
{
required: true,
message: “请选择开放状态，不能为空”,
trigger: “change”
}
],
isBindUser: [
{
required: true,
message: “请选择绑定业主，不能为空”,
trigger: “change”
}
],
userName: [
{
required: true,
message: “请输入业主姓名，不能为空”,
trigger: “blur”
}
],
phone: [
{
required: true,
message: “请输入业主手机号，不能为空”,
trigger: “blur”
}
],
time: [
{
required: true,
message: “请输入有效期限，不能为空”,
trigger: “blur”
}
],
}
};
下面是添加提交功能的方法

3.完成效果图 ，select 的trigger: “select” ,选中的时候错误信息会消失