vue表单校验

效果图

 第一步在<el-form>中加上 :rules="dataRule(名字自取)"

 <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="80px"
        :inline="true"
      >
        <div style="margin-bottom: 20px">
          <!--         <el-button
            type="white"
            @click="
              $router.push({
                name: 'pesticide-useinfo',
              })
            "
            >返回</el-button
          >

                     <el-button
            v-if="!disabled"
            type="primary"
            @click="dataFormSubmit()"
            >保存</el-button
          > -->
          <el-button
            @click="addOneLine()"
            style="right: 75px; position: absolute; margin-top: 20px"
            type="primary"
            :disabled="isnewone"
            >新增记录</el-button
          >
          <el-button
            @click="deleteHandle()"
            style="right: 200px; position: absolute; margin-top: 20px"
            type="danger"
            :disabled="dataListSelections.length <= 0"
            >批量删除</el-button
          >
          <!--            <el-button
          v-if="!disabled"
          type="primary"
          @click="dataFormSubmit()"
          >新增</el-button
        > -->
        </div>
        <div>
          <el-form-item label="户主编号" prop="farmerId">
            <!-- <el-input
              v-model="dataForm.farmerId"
              :disabled="disabled"
              placeholder="户主编号"
              onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
              :maxlength="15"
            ></el-input> -->
            <el-tooltip
              class="item"
              effect="dark"
              content="请先填写农户信息表的户主编号"
              placement="top"
            >
              <el-button style="width: 150px; height: 36px"> </el-button>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="年份" prop="dateyear">
            <!-- <el-input
            v-model="dataForm.dateyear"
            :disabled="disabled"
            placeholder="年份"
          ></el-input> -->
            <el-date-picker
              type="year"
              placeholder="选择年份"
              v-model="dataForm.dateyear"
              style="width: 100%"
              format="yyyy"
              value-format="yyyy"
              :disabled="true"
            ></el-date-picker>
          </el-form-item>
           <el-form-item label="任务id" prop="taskId">
            <el-input
              onkeyup="this.value = this.value.replace(/[\u4E00-\u9FA5]/g,'');"
              v-model="dataForm.taskId"
              :disabled="disabled"
              placeholder="任务id"
              :maxlength="15"
            ></el-input>
          </el-form-item> 
        </div>
      </el-form>

js中

 data () {
    return {
      disabled: false,
      visible: false,
      dataForm: {
        id: 0,
        farmerId: '',
        dateyear: '',
        taskId: ''
      },
      dataRule: {
        farmerId: [
          { required: true, message: '农户编号不能为空', trigger: ['blur', 'change'] }
        ],
        taskId: [
          { required: true, message: '任务id不能为空', trigger: ['blur', 'change'] }
        ],
        dateyear: [
          { required: true, message: '年份不能为空', trigger: ['blur', 'change'] }
        ],
      }
    }
  },

就可以实现校验了