iview表单验证中同时包含动态和固定项的处理

网页中引入iview

由于项目没有使用前后端分离，所以需要在web页中引入iview。这个遵循官网说明就可以，但是因为我们服务器不能主动连接外网，所以把相关的包下载下来

<link rel="stylesheet" type="text/css" href="/Content/libs/iview-2.0/dist/styles/iview.css">
<script type="text/javascript" src="/Content/libs/vue-dev/dist/vue.min.js"></script>
<script type="text/javascript" src="/Content/libs/iview-2.0/dist/iview.min.js"></script>
<script type="text/javascript" src="/Content/libs/iview-2.0/dist/locale/en-US.js"></script>

引入相关文件后，需要声明 vue对象

<script>
  iview.lang('en-US');
    new Vue({
        el: '#app',
        data: {
         formValidate: {
         	userName:'',
         	families:[]
         },
         ruleValidate: {
         userName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            }
		 },
        mounted: function () { 
        },
         methods: {
		},
        created: function () {
        }
         })
</script>

这里需要说明的是，在我的网页中，表单中既包含固定的表单项，也包含通过families 数组动态生成的表单项，这里都需要做验证。formValidate是用来存放表单绑定对象的地方，ruleValidate是用来存放表单验证方法的地方。需要注意的是，需要把 families 数组也包含在 放置 表单绑定对象的 formValidate中（一定要这样做）。

表单形式

我的网页中，表单如下：

<i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" id="registerForm" label-position="top" action="/Internal/Index" method="Post">
	<Form-Item label="姓名" prop="userName">
		<i-Input type="text" v-model="formValidate.userName" name="userName" placeholder="请输入您的姓名"></i-Input>
 </Form-Item>
       <div v-for="(f, index) in formValidate.families"     v-if="f.status"      :key="index">
			<Form-Item label="手机号码" :prop="'families.'+index+'.familyTelephone'" :rules="{ required: true, message: '请输入您的家属手机号码', trigger: 'blur' }">												 
                 <i-Input type="text" v-model="f.familyTelephone" name="familyTelephone" placeholder="请输入家属手机号码"></i-Input>
			</Form-Item>
	</div>
</i-form>

说明：这里是关键，表单中 :model=formValidate 声明了绑定对象，:rules=“ruleValidate"声明了固定表单项绑定的验证方法需要特别注意的是，这里的:model属性就决定了 动态绑定表单的数组必须放在formValidate 里面，我试了很多次，只有这样才是成功的，后来通过 vue的代码发现，这是用来查找验证属性prop 对应的路径的方式，会通过 v-mode的路径来查找，也会对应form的v-model的属性。
还有 :prop=”‘families.’+index+’.XXX’"这种写法是必须的。只有这种写法，才能对应到 表单项的 v-model上面。其中 families.’+index 是用来找到 数组中对应的元素，后面的具体属性是对应数组元素的属性。只有对应上了，验证才能生效。

复杂的验证

如果验证比较复杂，那么可以这样设置
:rules="{validator:validateMeal ,trigger: ‘blur’}"
就是设置validator属性等于一个验证方法，validateMeal
然后把validateMeal 写到 data里面。

 data: {
 .....
  validateMeal: function (rule, value, callback) {
                var v = $("#hidMeal").value;            
                if (v == "1" && value === '') {
                    callback(new Error('Please Enter Dietary Requirements'));
                } else {
                    callback();
                }
            },
            .....
            },

可以看到 这个验证方法里，还可以用到jquery的方式。这里主要是因为 jquery的生命周期和vue生命周期的问题，不再多说。复杂的验证逻辑就可以这样写。