文号验证-同时对两个输入框验证

文号验证-同时对两个输入框验证

效果:


一、如果有多个文号:

html 复制代码
<div v-for="(item, index) in approvalForm.productApprovalTypeEvents" :key="index">
<el-form-item
	label="文号"
	:prop="'productApprovalTypeEvents.' + index"
	:rules="rules.combinedRule"
>
	证监许可〔<el-input v-model="item.noOne" style="width: 30%" clearable @input="handleInputNum($event, 'noOne', index)"></el-input>〕
	<el-input v-model="item.noTwo" style="width: 30%" clearable @input="handleInputNum($event, 'noTwo', index)"></el-input>号
</el-form-item>
</div>
typescript 复制代码
rules: {
	combinedRule: [
		{ required: true, message: '无效证监许可号', trigger: 'blur' },
		{ validator: combinedRuleValidator, trigger: 'blur' },
	],
}

function combinedRuleValidator(rule: any, value: any, callback: any) {
	// 获取当前表单项对应的对象
	// console.log(value, 'valueeee');
	const noOne = value.noOne;
	const noTwo = value.noTwo;
	if (!noOne || !noTwo) {
		callback(new Error('无效证监许可号'));
	} else {
		callback();
	}
}
// 证监许可号
function handleInputNum(val: string, field: string, fIndex: number) {
	state.approvalForm.productApprovalTypeEvents[fIndex][field] = val.replace(/\D/g, '');
}
				

二、单个文号:

html 复制代码
<el-form-item
	v-if="sendInfoForm.apvlFileType == '1' || sendInfoForm.apvlFileType == '2'"
	:label="sendInfoForm.apvlFileType == '1' ? '批复文号' : sendInfoForm.apvlFileType == '2' ? '变更批复文号' : '文号'"
	prop="noOne"
	:rules="rules.combinedRule"
>
	证监许可〔<el-input
		v-model="sendInfoForm.noOne"
		style="width: 35% !important"
		clearable
		@input="handleInputNum($event, 'noOne')"
	></el-input
	>〕
	<el-input v-model="sendInfoForm.noTwo" style="width: 34% !important" clearable @input="handleInputNum($event, 'noTwo')"></el-input
	>号
</el-form-item>
typescript 复制代码
rules:{
	combinedRule: [
		{ required: true, message: '无效证监许可号', trigger: ['blur', 'change'] },
		{ validator: combinedRuleValidator, trigger: 'blur' },
	],
}
function combinedRuleValidator(rule: any, value: any, callback: any) {
	if (!state.sendInfoForm.noOne && !state.sendInfoForm.noTwo) {
		callback(new Error('无效证监许可号'));
	} else if (!state.sendInfoForm.noOne) {
		callback(new Error('无效证监许可号'));
	} else if (!state.sendInfoForm.noTwo) {
		callback(new Error('无效证监许可号'));
	} else {
		callback();
	}
}
// 证监许可号
function handleInputNum(val: string, field: string) {
	state.sendInfoForm[field] = val.replace(/\D/g, '');
}
相关推荐
多多*2 小时前
LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考
linux·开发语言·redis·python·bootstrap·lua
Dontla3 小时前
为什么React列表项需要key?(React key)(稳定的唯一标识key有助于React虚拟DOM优化重绘大型列表)
javascript·react.js·ecmascript
Wish3D3 小时前
阿里云OSS 上传文件 Python版本
开发语言·python·阿里云
凤年徐3 小时前
【数据结构初阶】单链表
c语言·开发语言·数据结构·c++·经验分享·笔记·链表
oioihoii3 小时前
C++11 右值引用:从入门到精通
开发语言·c++
EndingCoder4 小时前
React从基础入门到高级实战:React 实战项目 - 项目三:实时聊天应用
前端·react.js·架构·前端框架
阿阳微客5 小时前
Steam 搬砖项目深度拆解:从抵触到真香的转型之路
前端·笔记·学习·游戏
德育处主任Pro5 小时前
『React』Fragment的用法及简写形式
前端·javascript·react.js
CodeBlossom6 小时前
javaweb -html -CSS
前端·javascript·html
CodeCraft Studio6 小时前
【案例分享】如何借助JS UI组件库DHTMLX Suite构建高效物联网IIoT平台
javascript·物联网·ui