el-form实现其中一个填写即可的校验-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-form实现其中一个填写即可的校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-form实现其中一个填写即可的校验,后台管理系统,vue.js,elementui,前端

文章来源地址https://www.toymoban.com/news/detail-541937.html

      <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        label-width="130px"
      >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="司机姓名 :" prop="driverName">
              <el-input
                :disabled="isDisable"
                v-model="formData.driverName"
                placeholder="请输入司机姓名"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="联系方式 :" prop="driverPhone">
              <el-input
                :disabled="isDisable"
                v-model="formData.driverPhone"
                placeholder="请输入联系方式"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证号 :" prop="driverCard">
              <el-input
                :disabled="isDisable"
                v-model="formData.driverCard"
                placeholder="请输入身份证号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="归属部门 :" prop="deptId">
              <el-select
                :disabled="isDisable"
                v-model="formData.deptId"
                @change="deptChange"
                filterable
                placeholder="请选择归属部门"
              >
                <el-option
                  v-for="(item, index) in deptList"
                  :key="index"
                  :label="item.deptName"
                  :value="item.deptId"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="驾驶证编号 :" prop="driverNum">
              <el-input
                :disabled="isDisable"
                v-model="formData.driverNum"
                placeholder="请输入驾驶证编号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="过期时间 :" prop="driverExpireTime">
              <el-date-picker
                :disabled="isDisable"
                v-model="formData.driverExpireTime"
                style=""
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="ic卡号 :" prop="cardId">
              <el-select
                v-model="formData.cardId"
                :disabled="isDisable"
                filterable
                placeholder="请输入ic卡号"
              >
                <el-option
                  v-for="(item, index) in cardNumList"
                  :key="index"
                  :label="item.cardNum"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="指纹编号 :" prop="printCode">
              <el-input
                :disabled="isDisable"
                v-model="formData.printCode"
                placeholder="请输入指纹编号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="人脸编号 :" prop="faceCode">
              <el-input
                :disabled="isDisable"
                v-model="formData.faceCode"
                placeholder="请输入人脸编号"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="备注 :" prop="remark">
              <el-input
                :disabled="isDisable"
                v-model="formData.remark"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="图片 :" prop="image">
              <multipleUpload
                v-if="isShowImgVideo"
                :disabled="detailsShow"
                :limit-count="4"
                :img-list="imgList"
                :submit-img="submitImg"
                @getImg="getImgUpload"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

  data() {
    return {
        formData: {},
 formRules: {
        driverName: [
          { required: true, message: "请输入司机姓名", trigger: "blur" },
        ],
        deptId: [
          { required: true, message: "请选择归属部门", trigger: "blur" },
        ],
        cardId: [
          {
            required: true,
            validator: this.validateAtLeastOneRequired,
            trigger: "blur",
          },
        ],
        printCode: [
          {
            required: true,
            validator: this.validateAtLeastOneRequired,
            trigger: "blur",
          },
        ],
        faceCode: [
          {
            required: true,
            validator: this.validateAtLeastOneRequired,
            trigger: "blur",
          },
        ],
      },
    }
 }

methods:{

    /**
     * @Event 方法
     * @description: ic卡号 指纹编号 人脸编号 其中一个必填校验
     * */
    validateAtLeastOneRequired(rule, value, callback) {
      const field = "ic卡号、指纹编号、人脸编号";
      if (
        this.formData.cardId ||
        this.formData.printCode ||
        this.formData.faceCode
      ) {
        callback();
      } else {
        callback(new Error(`${field}至少填写一个`));
      }
    },


    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // do something
        } else {
          return false;
        }
      });
    },
}

到了这里，关于el-form实现其中一个填写即可的校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！