vue form表单验证

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 要加上 ' ' 进行标识

如有不对之处，请指正。谢谢你