element-ui表单验证

• 情景

1. 我想利用饿了么框架实现表单验证
2. http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan
3. 但是我的form里面的model和例子所给的model格式不一样

4. 
       
       
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
           //这是例子所给的数据结构
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
           ruleForm: {
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               name: 
           
           '',
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               region: 
           
           '',
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               date1: 
           
           '',
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               date2: 
           
           '',
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               delivery: 
           
           false,
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               type: [],
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               resource: 
           
           '',
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               desc: 
           
           ''
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
           }
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
    
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
           //所做项目中需要提交的数据结构
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
           ruleForm: {
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
             name: {
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               a: 
           
           ''
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
             },
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
             region:{
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               date1: 
           
           '',
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
               date2: 
           
           '',
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
             }
          
          
         
         
   
         
         
   
          
          
   
         
         
         
         
   
          
          
   
           
           },
          
          
         
         
       
       
   

   <p>&nbsp;</p>
   </li>
   <li>
   <p>&nbsp;接下来就从饿了么的在线运行上操作一下</p>
   </li>
   

 

• 从你的浏览器打开饿了么表单验证例子的使用 饿了么表单
• 点击在线运行

• 然后你会学习到el-form

1. :model是最后表单需要验证的数据，对应上面数据中的ruleForm
2. :rules是这个表单的规则，规则对应事例中的rules

• 然后你会学习到el-form-item

1. prop对应的是rules中定义的字段，一一对应
2. prop与这个表单绑定的model也是一一对应的

•  在这个例子中你会发现每个表单验证的逻辑比较正常，一般会符合大家的使用
• 这个时候你可以尝试修改data中的数据结构（改完记得点击保存和运行左上角）

 

这个时候你会发现表单验证各种不正常，明明输入了却提示未输入，这时候你可能要去研究一波验证的时间特质

其实原因并不是

• 经过上面的实践你可以学到

rules中的prop（即上图中的name.a)需要和ruleForm.xxx中的xxx一致对应，当v-model绑定的值变为ruleForm.name.a时prop也要改为name.a