使用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')
}