一:表单基本验证

表单验证需要定义三个基本属性 表单:model,:rules以及表单项的props，切注意props中的name值必须和表单项name值一样，即下面ruleValidate中的name和formitem中的一致

                                            
<template>
  <Form :model="formItem" :label-width="80" :rules="ruleValidate"  style="width:50%;margin-top:50px;">
   <Form-item label="场景名称" prop="scenarioName">
     <Col span="15">
         <Input v-model="formItem.scenarioName"></Input>
     </Col>
   </Form-item>
   <Form-item label="描述">
     <Col span="15">
        <Input v-model="formItem.describe" type="textarea" :autosize="{minRows: 3,maxRows: 5}"></Input>
    </Col>
   </Form-item>
   <Form-item>
     <Button type="primary" @click="submit">提交</Button>
     <Button type="ghost" style="margin-left: 8px" @click="back">返回</Button>
   </Form-item>
  </Form>
</template>

data () {
  return {
    formItem: {
        scenarioName:''
        describe: ''
    },
    ruleValidate:{
     scenarioName:[
        { required: true, message: '名称不能为空', trigger: 'blur' }
      ]
    }
  }
                                            
                                        

二:动态生成表单中的动态验证方式

iview提供了给每个表单项添加rules的验证方式，实现的关键在于上面所说的name值必须一致,很简单，就是动态生成的formdata里面的属性name和props的值相同即

直接截取部分工程代码；理解下面的formdata值的动态生成即可，

1. 保证加粗部分值一致 2. 给每项菜单项添加rule，这里直接写死，项目中通过item.rules获取即可

                                            
<template>
<span>
 <Form :model="formdata" :label-width="80">
    <!-- 原子属性  这里的表单数据通过props从父组件获取，也可直接定义一个即可 -->
    <div v-for="item in params.atomForm" :key="item.name">
      <template v-if="item.type=='text'" >
        <Form-item 
          :label="item.title"
          :prop="item.name"
          :rules=" { required: true, message: 'The name cannot be empty', trigger: 'blur' }">
          <Col span="15">
              <Input type="text" v-model="formdata[item.name]" placeholder="请输入"></Input>
          </Col>
        </Form-item>
    </template>
    <template v-if="item.type=='date'" >
        <Form-item :label=item.title>
          <Col span="15">
              <DatePicker type="date" placeholder="Select date" v-model="formdata[item.name]"></DatePicker>
          </Col>
        </Form-item>
      </template>
    </div>


    </Form>
</span>
</template>
<script>
export default {
    data(){
        return {  
            formdata:{}
        }
    },
    props:{
        params:Object
    },
    computed:{
        getformdata:function(){
            return this.formdata    // 作用:实时监控formdata对象值的变化
        }
    },
    methods:{},
    created:function(){
        //this.$emit('atomform',this.getformdata)    
       // console.log("this.props.params",this.props.params); 
        //this.ruleValidate[]
    }
}
</script>
                                            
                                        

题外篇:vue模板中遍历循环输出dom元素的时候，不建议使用div；可以借助template标签，如同上面一样；好处是template不会被渲染成dom

三:表单ref属性

上面定义的rules会有各自的触发器，即blur、change等；失去焦点或者改变的时候验证；通过ref可以在提交表单时对表单内的所有数据统一验证， 使用过程简要如下三步

                                            
// 定义ref属性
<Form :model=" formdata" ref="formValidate" :label-width="80">

// 传值ref值
<Button type="primary" @click="submit('formValidate')">提交</Button>

// 提交表单时验证
submit:function(name){
    this.$refs[name].validate((valid) => {
        if (valid) {
            // 验证成功 执行代码
        }
    })
}