vue中表单数据规则验证

<template>

        

      <div class="dialog-box">

        <el-scrollbar>

          <el-form

            ref="service"

            :model="serviceForm"

            :rules="rules"

            label-width="100px"

          >

            <el-row style="padding: 0.1rem 0.2rem 0">

              <el-col :span="24">

                <el-form-item label="个人风采" prop="avatar">

                  <imageCut

                    v-model="serviceForm.avatar"

                    :fixedNumber="[86, 114]"

                    :disabled="disabled1"

                  >

                  </imageCut>

                </el-form-item>

                <el-form-item label="姓名" prop="name">

                  <el-input

                    v-model="serviceForm.name"

                    :disabled="disabled1"

                  />

                </el-form-item>

                <el-form-item label="职称" prop="jobTitle">

                  <el-input

                    v-model="serviceForm.jobTitle"

                    :disabled="disabled1"

                  />

                </el-form-item>

              </el-col>

              <el-col :span="24">

                <el-form-item label="身份证号" prop="idCard">

                  <el-input

                    v-model="serviceForm.idCard"

                    :disabled="disabled1"

                  />

                </el-form-item>

              </el-col>

              <el-col :span="24">

                <el-form-item label="所在地区" prop="area">

                  <!-- <el-select

                    v-model="serviceForm.province"

                    placeholder="请选择省份"

                    @change="cityData"

                    :disabled="disabled1"

                    style="width: 100%;"

                  >

                    <el-option

                      v-for="province in provinceOptions"

                      :key="province.value"

                      :label="province.value"

                      :value="province.value"

                    />

                  </el-select> -->

                  <el-select

                    v-model="serviceForm.area"

                    placeholder="请选择地区"

                    :disabled="disabled1"

                    style="width: 100%;"

                  >

                    <el-option

                      v-for="area in cityOptions"

                      :key="area.value"

                      :label="area.value"

                      :value="area.value"

                    />

                  </el-select>

                </el-form-item>              

              </el-col>

              <el-col :span="24">

                <el-form-item label="关联产业" prop="productCategoryId">

                  <el-select

                    v-model="serviceForm.productCategoryId"

                    placeholder="请选择一级产业"

                    @change="productTwoData"

                    :disabled="disabled1"

                    style="width: 40%; margin-right:5px"

                  >

                    <el-option

                      v-for="product in productFirstOptions"

                      :key="product.value"

                      :label="product.text"

                      :value="product.value"

                    />

                  </el-select>

                  <el-select

                    v-model="serviceForm.productCategoryTwoId"

                    placeholder="请选择二级产业"

                    :disabled="disabled1"

                    style="width: 40%;"

                  >

                    <el-option

                      v-for="product in productTwoOptions"

                      :key="product.value"

                      :label="product.text"

                      :value="product.value"

                    />

                  </el-select>

                </el-form-item>

              </el-col>

              <el-col :span="24">

                <el-form-item label="所属单位" prop="enterpriseId" >

                  <el-select

                    v-model="serviceForm.enterpriseId"

                    placeholder="请选择所属单位"

                    :disabled="disabled1||disabled2"

                    ref="enterpriseSel"

                    style="width: 40%;margin-right:5px;">

                    <el-option

                      v-for="option in EnterpriseList"

                      :label="option.enterpriseName"

                      :value="option.id"

                      :key="option.id"

                    />

                  </el-select>

                 

                  <el-input

                    v-model="serviceForm.enterpriseName"

                    :disabled="disabled1||disabled3"

                    style="width:40%;margin-right:10px;"

                  />

                  <el-checkbox

                    :disabled="disabled1"

                    v-model="serviceForm.comBox"

                    label="是否输入"

                    @change="changeBox"

                  />

                </el-form-item>

              </el-col>

              <el-col :span="24">

                <el-form-item label="研究方向" prop="researchDirection">

                  <el-input

                        type="textarea"

                        v-model="serviceForm.researchDirection"

                        placeholder="请输入研究方向"

                        :disabled="disabled1"

                        style="width: 100%"

                        :autosize="{ minRows: 4, maxRows: 6 }"/>

                </el-form-item>

              </el-col>

              <el-col :span="24" style="margin-bottom: 18px;">

                <el-form-item label="数据来源" prop="dataSources">

                  <el-input

                    v-model="serviceForm.dataSources"

                    :disabled="disabled1"

                  />

                </el-form-item>

              </el-col>

            </el-row>

          </el-form>

        </el-scrollbar>

      </div>

</template>