element ui form validate（ElementUI中＜el-form＞标签中 ref、:model、:rules 的作用）

首先看一下代码

<el-form ref="loginForm" :model="loginInfo" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" >

ref 属性涉及Dom 元素的获取(el-form表单对象)    
    
    
    
。

javaSrcipt 获取Dom 元素是通过：document.querySelector（".input"）获取dom元素节点 


     


     


     


   。

Vue 为简化DOM获取方法提出了ref 属性和$refs 对象

 




 




 




 

。一般的操作流程是:ref 绑定控件
    
    
    
   ，$refs 获取控件   

   

   

   

。

Element官方文档中写到：

model是表单数据对象     


     


     


     

，rules是表单验证规则  

     

     

     

  。

Form 组件提供了表单验证的功能 




 




 




 




，只需要通过 rules 属性传入约定的验证规则

   

   

   

  ，并将 Form-Item 的 prop 属性设置为需校验的字段名即可


  




  




  




  
。

里面的逻辑大概是     

     

     

     
，在el-form-item上写一个prop  




  




  




  




，这个prop左手对应着数据源（即用model.prop找到对应的数据源）


  


  


  


 ，右手对应着验证规则（即用rules.prop找到对应的规则）     
     
     
     ，然后进行验证  


  


  


  


。