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')
 }
相关推荐
毕设十刻11 分钟前
基于Vue的迅读网上书城22f4d(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
程序员小寒12 分钟前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
开发语言·前端·javascript·面试
爱健身的小刘同学44 分钟前
Vue 3 + Leaflet 地图可视化
前端·javascript·vue.js
神秘的猪头1 小时前
Ajax 数据请求:从零开始掌握异步通信
前端·javascript
黛色正浓1 小时前
leetCode-热题100-贪心合集(JavaScript)
javascript·算法·leetcode
musashi2 小时前
用 Electron 写了一个 macOS 版本的 wallpaper(附源码、下载地址)
前端·vue.js·electron
徐徐子2 小时前
从vue3 watch开始理解Vue的响应式原理
前端·vue.js
拾荒的小海螺2 小时前
开源项目:Three.js 构建 3D 世界的工具库
javascript·3d·开源
还债大湿兄2 小时前
huggingface.co 下载有些要给权限的模型 小记录
开发语言·前端·javascript
叶落无痕522 小时前
Electron应用自动化测试实例
前端·javascript·功能测试·测试工具·electron·单元测试