iview Form表单验证思路整理

项目基本代码如下  Modal 和Form结合实现需求

在 Form 内，每个表单域由 FormItem 组成，可包含的控件有：Input、Radio、Checkbox、Switch、Select、Slider、DatePicker、TimePicker、Cascader、Transfer、InputNumber、Rate、Upload、AutoComplete、ColorPicker。 

  1.标签label  

FormItem 上输入label="ID："标签名，Form 上输入:label-width="100"标签宽度， label-position可以改变标签相对于输入框的位置，left 为左对齐，right 为右对齐，top 会置于表单域顶部。
  2.  表单验证

Form 组件基于  async-validator 实现的数据验证，给Form设置属性rules,同时给需要验证的FormItem设置prop指向对应字段

即Form上设置:rules='ruleValidate 对象名称 ，表单域FormItem 输入 prop='rulesName'，data中设置默认值

model表单数据对象 ,Form上设置:model="formValidate" 对象名称 ，控件中输入 v-model="formValidate.modelName"，data中设置默认值

this.$refs[name].validate((valid) => {//valid验证结果，name为rules绑定名称

})

this.$refs[name].resetFields();重新对整个表单进行重置，将所有字段值重置为空并移除校验结果

  

 

 

     

            
                
            
            
                
            
            
                
            
         
            
                
                    无限制
                    新用户
                
            
          
            
                
                    --非必填--
                    活动1
                    活动2
                
            
           
            
                
            
            
        
    

取消 确定