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')
 }
相关推荐
T***u33321 分钟前
前端框架在性能优化中的实践
javascript·vue.js·前端框架
jingling5551 小时前
vue | 在 Vue 3 项目中集成高德地图(AMap)
前端·javascript·vue.js
油丶酸萝卜别吃1 小时前
Vue3 中如何在 setup 语法糖下,通过 Layer 弹窗组件弹出自定义 Vue 组件?
前端·vue.js·arcgis
J***Q2928 小时前
Vue数据可视化
前端·vue.js·信息可视化
JIngJaneIL9 小时前
社区互助|社区交易|基于springboot+vue的社区互助交易系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·社区互助
ttod_qzstudio10 小时前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
芳草萋萋鹦鹉洲哦10 小时前
【elemen/js】阻塞UI线程导致的开关卡顿如何优化
开发语言·javascript·ui
1***s63210 小时前
Vue图像处理开发
javascript·vue.js·ecmascript
一 乐10 小时前
应急知识学习|基于springboot+vue的应急知识学习系统(源码+数据库+文档)
数据库·vue.js·spring boot
槁***耿10 小时前
JavaScript在Node.js中的事件发射器
开发语言·javascript·node.js