表单组件 Form

在一个后台管理网站中，表单相关组件是一套很常用的组件。用于收集用户填写的信息。基本结构如下：

<el-form :model="form" label-width="100px">
<el-form-item label="账号">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="账号">
<el-input v-model="form.pwd" />
</el-form-item>
</el-form>

data(){
return {
form: {
name: '',
pwd: ''
}
}
}

表单验证

表单验证有两种场景，这两种场景一般都需要实现：

1. 当某一个表单项输入完毕后（焦点失去等），验证当前表单项。

2. 当最终点击提交按钮时，发请求之前必须要验证，所有表单项都验证通过才可以发送请求。

当某一个表单项输入完毕后（焦点失去等），验证当前表单项

<el-form :model="form" :rules="rules">
<el-form-item label="账号" prop="name">
<el-input v-model="form.name" />
</el-form-item>
</el-form>

data(){
return {
form: {
name: ''
},
rules: {
name: [
{required:true, message:'必填项', trigger:'blur'},
{min:5, max:15, message:'必填项', trigger:'blur'},
]
}
}
}

callback的认知：可以将callback当做是函数返回结果的一种方式，除了这种方式，还可以使用return返回结果。

用return返回结果：

function sum(a, b){
return a+b
}
let r = sum(10, 20)
在此处执行后续业务

用callback返回结果：

function sum(a, b, callback){
callback(a+b)
}
sum(10, 20, (r)=>{
当前箭头函数就是callback回调方法
参数r就是计算后返回的结果
在此处执行后续业务
})

当最终点击提交按钮时，所有表单项都需要验证。

<el-form ref="abc">
<el-form-item>.....</el-form-item>
<el-form-item>.....</el-form-item>
.....
<el-button @click="submit">提交</el-button>
</el-form>

submit(){
// 验证form表单的所有表单项
// this.$refs['abc'] 获取 el-Form组件对象
// this.$refs.abc 获取 el-Form组件对象
this.$refs['abc'].validate((valid)=>{
valid为true，则所有表单项验证通过
valid为false，则有表单项验证失败
})
}