- 情景
- 我想利用饿了么框架实现表单验证
- http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan
- 但是我的form里面的model和例子所给的model格式不一样
-
-
//这是例子所给的数据结构
-
ruleForm: {
-
name: '',
-
region: '',
-
date1: '',
-
date2: '',
-
delivery: false,
-
type: [],
-
resource: '',
-
desc: ''
-
}
-
-
//所做项目中需要提交的数据结构
-
ruleForm: {
-
name: {
-
a: ''
-
},
-
region:{
-
date1: '',
-
date2: '',
-
}
-
},
<p> </p> </li> <li> <p> 接下来就从饿了么的在线运行上操作一下</p> </li>
-
- 从你的浏览器打开饿了么表单验证例子的使用 饿了么表单
- 点击在线运行
- 然后你会学习到el-form
- :model是最后表单需要验证的数据,对应上面数据中的ruleForm
- :rules是这个表单的规则,规则对应事例中的rules
- 然后你会学习到el-form-item
- prop对应的是rules中定义的字段,一一对应
- prop与这个表单绑定的model也是一一对应的
- 在这个例子中你会发现每个表单验证的逻辑比较正常,一般会符合大家的使用
- 这个时候你可以尝试修改data中的数据结构(改完记得点击保存和运行左上角)
这个时候你会发现表单验证各种不正常,明明输入了却提示未输入,这时候你可能要去研究一波验证的时间特质
其实原因并不是
- 经过上面的实践你可以学到
rules中的prop(即上图中的name.a)需要和ruleForm.xxx中的xxx一致对应,当v-model绑定的值变为ruleForm.name.a时prop也要改为name.a