1.使用<el-form>包裹整个表单 在其中使用:model 绑定数据 和 :rules绑定校验规则
<el-form :model="user" :rules="rules">
......................................
</el-from>
2.在script中添加使用数据 以及 校验规则(都添加在data中)
data() {
return {
rules: {
cinema_name: [{ required: true, message: '必填', trigger: 'blur' }],
address: [{ required: true, message: '必填', trigger: 'blur' }]
},
}
},
3.在input应该被el-from-item包裹 传入prop (prop对应校验数据)
<div class="title">登录</div>
<el-form :model="user" :rules="rules">
<el-form-item prop="username">
<el-input
size="medium"
style="margin: 10px auto"
prefix-icon="el-icon-user"
v-model="user.username" ></el-input>
</el-form-item>
</el-from>
4.数据提交校验 在<el-form>中使用ref (校验失败就不会发送请求)ref:本页面获取dom元素
<el-form :model="user" :rules="rules" ref="userForm">
在methods方法中使用回调判断数据校验
示例:
// 执行提交表单
submit() {
this.$refs['form'].validate((valid) => {
if (valid) {
// 所有字段验证通过
// 整理字段
this.form.tags = this.form.tags.join(',')
console.log(this.form)
// 发送新增影院请求,执行业务
httpApi.cinemaApi.add(this.form).then((res) => {
if (res.data.code == 200) {
// 新增成功
this.$message({
message: '恭喜,影院新增成功',
type: 'success',
})
this.$router.push('/home/cinema-list')
}
})
}
})
},