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')
 }
相关推荐
携欢10 分钟前
PortSwigger靶场之Exploiting server-side parameter pollution in a REST URL通关秘籍
前端·javascript·安全
软件技术NINI37 分钟前
html css js网页制作成品——HTML+CSS+js早餐铺网页设计(4页)附源码
javascript·css·html
艾小码1 小时前
前端必备:JS数组与对象完全指南,看完秒变数据处理高手!
前端·javascript
weixin-a153003083162 小时前
vue疑难解答
前端·javascript·vue.js
大怪v9 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
西陵9 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
Panda__Panda10 小时前
docker项目打包演示项目(数字排序服务)
运维·javascript·python·docker·容器·c#
10年前端老司机11 小时前
Promise 常见面试题(持续更新中)
前端·javascript
nueroamazing12 小时前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
WebDesign_Mu13 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html