Form 表單驗證
對輸入框中的數據的空值驗證。
效果圖：（沒有填寫數據，出現提示。且按鈕失效）
代碼展示
<Form ref="insuranceClaimsLists" :model="insuranceClaimsLists"
:rules="insuranceClaimsruleValidate" :label-width="160">
<FormItem label="保單號" prop="applyNo" class="inputUpdate">
<Input v-model="insuranceClaimsLists.applyNo"></Input>
</FormItem>
<FormItem label="客戶姓名" prop="customerName" class="inputUpdate">
<Input v-model="insuranceClaimsLists.customerName"></Input>
</FormItem>
<FormItem label="客戶性別" prop="customerSex" class="inputUpdate">
<Select v-model="insuranceClaimsLists.customerSex">
<Option v-for="item in this.sexList" :value="item.value" :key="item.lable">{{ item.lable }}
</Option>
</Select>
</FormItem>
<FormItem label="客戶出生日期" prop="customerBirthday" class="inputUpdate">
<DatePicker type="date" v-model="insuranceClaimsLists.customerBirthday"></DatePicker>
</FormItem>
...（此處省略相同標籤，樣式圖 中其餘的顯示）
</Form>
關鍵代碼：:rules="insuranceClaimsruleValidate" 驗證規則，insuranceClaimsruleValidate後面會對 進行聲明
聲明 ：把insuranceClaimsruleValidate對象的每一個對應屬性聲明驗證規則。
注意：:model="insuranceClaimsLists"和prop="hospital" 也必須保持一致，就是綁定的數據對象，要有這個屬性。
insuranceClaimsruleValidate: {
applyNo: [
{
required: true,
message: "請輸入申請號",
trigger: "blur"
}
],
applicantName: [
{
required: true,
message: "請輸入申請人姓名",
trigger: "blur"
}
],
...（此處省略相同標籤，樣式圖 中其餘的顯示）（追加的話記得用“,”號隔開）
}
點擊按鈕 觸發事件
<Button type="primary" style="margin-left: 50%;margin-top:20px;" shape="circle" @click="addInsuranceInfo('insuranceClaimsLists')" icon="ios-add-circle">保存</Button>
點擊事件@click="addInsuranceInfo('insuranceClaimsLists')"中的'insuranceClaimsLists' 參數 是 Form 中 ref="insuranceClaimsLists" 保持一致
ref 屬性：此處的ref是對 Form 標籤的一個標識 ，將Form中的子標籤 打包成一個整體。@click="addInsuranceInfo('insuranceClaimsLists')" 中的 insuranceClaimsLists 要加上 ' ' 進行標識
如有不對之處，請指正。謝謝你