11.vue实战--form表单字段验证提交验证-白红宇

11.vue实战--form表单字段验证提交验证

阅读量：2069 次

发布时间：2019-04-29

本文共 670 字，大约阅读时间需要 2 分钟。

一.form表单字段验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可

1.form中的rules属性绑定rules

2.form-item中的prop绑定对应的字段

3.在data中return对应的返回规则


   
               //rules属性绑定rules  
    
             //prop绑定对应的字段

二.表单提交预验证和重置

1.el-form中添加ref引用，releForm就是这个表单的实例对象

2.把按钮与重置的方法进行绑定

3.通过this调用refs对象中的resetFields方法

el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">    //el-form中添加ref引用，releForm就是这个表单的实例对象  
       
      
     
       
          
           
         
      
     
       
    
     立即创建
        
    
     重置
          //把按钮与重置的方法进行绑定