el-from中校验,如果某一项需要另一项填写才能校验

使用validateField



<el-form
      :model="params"
      :rules="rules"
      :scroll-to-error="true"
      ref="refrom"
      v-else
      >
        <el-form-item label="用户姓名" prop="name">
          <el-input placeholder="请输入用户姓名" v-model="params.name"></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="certificatesType">
          <el-select
            style="width: 100%"
            placeholder="请选择证件类型"
      v-model="params.certificatesType"
          >
          <el-option
      v-for="(item,index) in arrType"
      :key="index"
      :label="item.name"
      :value="item.value"
      
    />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="certificatesNo" >
          <el-input placeholder="请输入证件号码" v-model="params.certificatesNo"></el-input>
        </el-form-item>
        <el-form-item label="上传证件" prop="certificatesUrl">
          <!-- action:upload组件向服务器提交图片路径
               limit:照片墙约束图片个数
               on-exceed:超出约束数量的钩子
          -->
          <el-upload
          ref="upload"
          v-model="params.certificatesUrl"
            action="/api/oss/file/fileUpload?fileHost=userAuah"
            limit="1"
            list-type="picture-card"
            :on-exceed="handleExceed"
            :on-success="handlesuccess"
            :on-remove = 'handleremove'
            :on-preview="handlePictureCardPreview"
  >
  <img
            style="width: 100%; height: 100%"
            src="../../../assets/images!auth_example.png"
            alt=""
          />

  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img w-full alt="Preview Image" :src="params.certificatesUrl" v-if="params.certificatesUrl"/>
  </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="submit">提交</el-button>
          <el-button type="primary" size="default" @click="reset">重写</el-button>
        </el-form-item>
      </el-form>

1,先给form表单绑定ref 
 //创建form表单的实例
 const refrom = ref()

2,给表单绑定rules校验
 const rules = {
    name: [{ validator: checkName, trigger: 'change',required: true }],
    certificatesType: [{ validator: checkcertificatesType,required: true }],
    certificatesUrl: [{ validator: checkcertificatesUrl, trigger: 'change',required: true }],
    certificatesNo: [{ validator: checkcertificatesNo, trigger: 'change' ,required: true }]
 }

const checkcertificatesNo = (rule: any, value: any, callback: any) =>{
    if(params.certificatesType == ''){
        refrom.value.validateField('certificatesType',(errorMessage:any)=>{
            console.log(errorMessage,'errorMessage')
        })
    }
    console.log(params.certificatesType,'params.certificatesType')
 }

3,开始自定义校验

  //自定义name校验
  const checkName = (rule: any, value: any, callback: any) =>{
    const res = /^[\u4e00-\u9fa5]+$/
    if(res.test(value)){
        callback()
    }else{
        callback('请输入正确的名字')
    }
 }
 //自定义证件类型校验
 const checkcertificatesType = (rule: any, value: any, callback: any) =>{
    if(value == 10 || value == 20){
        callback()
    }else{
        callback('请选择证件类型')
    }
    console.log(value,'value')
 }
//自定义校验图片
//  const checkcertificatesUrl = (rule: any, value: any, callback: any) =>{
//     console.log(params.certificatesType,'params.certificatesType')
//  }
 //自定义校验证件号码
 const checkcertificatesNo = (rule: any, value: any, callback: any) =>{

//关键代码 validateField ,是一个函数,第一个填写要校验的某一项,第二个是一个函数,返回true和false,会自动触发certificatesType的校验规则,只需要在里面判断逻辑即可
       refrom.value.validateField('certificatesType',(errorMessage:any)=>{
            if(errorMessage == true){
                if(params.certificatesType == 10){
                    const reg = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/
                    if(reg.test(value)){
                        callback() 
                    }else{
                        callback('请输入正确的身份证')
                    }
                }else{
                    let hkb = /^\d{9}$/;
                    if(hkb.test(value)){
                        callback() 
                    }else{
                        callback('请输入正确的户口本')
                    }
                }
            }
        })

    console.log(params.certificatesType,'params.certificatesType')
 }

相关推荐

  1. el-form v-for循环列表的表单如何校验

    2024-07-13 01:22:01       39 阅读
  2. vue 清除form 校验状态

    2024-07-13 01:22:01       35 阅读
  3. 列表循环多个el-form-item并校验

    2024-07-13 01:22:01       37 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-13 01:22:01       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-13 01:22:01       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-13 01:22:01       58 阅读
  4. Python语言-面向对象

    2024-07-13 01:22:01       69 阅读

热门阅读

  1. 简述linux通知链机制

    2024-07-13 01:22:01       24 阅读
  2. 关于如何上传本地文件到Linux主机

    2024-07-13 01:22:01       16 阅读
  3. MySQL——PreparedStatement对象

    2024-07-13 01:22:01       21 阅读
  4. 【小超嵌入式】猜数字游戏详细分析

    2024-07-13 01:22:01       18 阅读
  5. 基于深度学习的文本分类

    2024-07-13 01:22:01       19 阅读
  6. VRRP虚拟路由器协议的基本概述

    2024-07-13 01:22:01       21 阅读
  7. ubuntu服务器部署vue springboot前后端分离项目

    2024-07-13 01:22:01       19 阅读
  8. c++二分算法

    2024-07-13 01:22:01       19 阅读
  9. try catch 解决大问题

    2024-07-13 01:22:01       20 阅读
  10. [C++]多态

    2024-07-13 01:22:01       23 阅读
  11. [Python学习篇] Python Socket网络编程

    2024-07-13 01:22:01       24 阅读