element-ui之form表单校验的使用详解

先吐槽一下，个人感觉element-ui提供的文档写的太少，用的时候会踩很多坑。

如：表单验证方法 传入的value没有值  等。

下面，是我对element-ui  form表单验证使用的总结，应该能解决大部分问题，或者，也可以直接拿过去修改使用。

（本文代码使用的是 vue.js + element-ui）

要写人名、年龄信息的表单校验（人的数量用户可自己增减）

1. el-form 上，model绑定的数据必须是json对象格式

（不一定说“必须”，只有是json对象格式的时候，element-ui提供的校验方法功能才完全可用）

 

2. el-form-item 上，prop绑定的值必须可以通过  .  的方式从el-form上的model绑定的对象中找到。

例： input绑定的是name，el-form上的model绑定的是formData，他们的关系是formData.list[0].name

        所以，prop绑定的值应该是字符串：list[0].name

        只有这样写，校验方法rule_name传入的value才是输入框中的值。

 3.  提交按钮要写在el-form-item中，提交方法要用element-ui提供的方法，这样，element-ui会在提交前进行表单校验

下面是代码