<think>根据用户需求，我们需要解决两个问题：1.在Vue中设置rules规则，确保四个输入框的内容不能相同，并实时提示。2.提供用于验证正数的正则表达式。结合引用内容，我们可以这样实现：###一、四个输入框内容不同的验证规则（使用ElementPlus为例）思路：为每个字段设置自定义验证器，在验证器中检查当前值是否与其他三个字段的值重复。```html<template><el-form:model="form":rules="rules"ref="formRef"><!--四个输入框--><el-form-itemlabel="字段1"prop="field1"><el-inputv-model="form.field1"/></el-form-item><el-form-itemlabel="字段2"prop="field2"><el-inputv-model="form.field2"/></el-form-item><el-form-itemlabel="字段3"prop="field3"><el-inputv-model="form.field3"/></el-form-item><el-form-itemlabel="字段4"prop="field4"><el-inputv-model="form.field4"/></el-form-item></el-form></template><scriptsetup>import{reactive,ref}from'vue';constformRef=ref(null);constform=reactive({field1:'',field2:'',field3:'',field4:''});//自定义验证函数：检查值是否唯一（排除自身）constcheckUnique=(value,excludeField)=>{//获取其他字段的值（排除当前字段）constotherValues=Object.entries(form).filter(([key])=>key!==excludeField).map(([,val])=>val);//检查当前值是否在其他字段中出现return!otherValues.includes(value);};//通用验证规则生成器（为每个字段生成相同的验证逻辑）constcreateUniqueRule=(fieldName)=>{return[{required:true,message:'不能为空',trigger:['blur','change']},{validator:(_,value,callback)=>{if(value===''){callback(newError('不能为空'));return;}//检查唯一性if(!checkUnique(value,fieldName)){callback(newError('值不能重复'));}else{callback();}},trigger:['input','blur']//输入时实时验证}];};construles=reactive({field1:createUniqueRule('field1'),field2:createUniqueRule('field2'),field3:createUniqueRule('field3'),field4:createUniqueRule('field4')});</script>```###二、正数的正则表达式根据引用[1]和[3]，我们可以使用以下正则表达式：-**正整数**：`/^[1-9]\d*$/`（不允许前导零，但允许0？注意：正整数通常不包括0）-**非负整数（包含0）**：`/^\d+$/`-**正浮点数（保留两位小数）**：`/^(([1-9]\d*)|0)(\.\d{1,2})?$/`（允许整数或最多两位小数）如果用户需要正整数（不包含0），则使用：`/^[1-9]\d*$/`如果用户需要正整数（包含0），则使用：`/^(0|[1-9]\d*)$/`###三、在验证规则中同时使用唯一性验证和正数验证我们可以修改上面的`createUniqueRule`函数，加入正数验证（以正整数为例）：```javascriptconstcreateUniqueRule=(fieldName)=>{return[{required:true,message:'不能为空',trigger:['blur','change']},//正数验证（正整数）{pattern:/^[1-9]\d*$/,message:'必须为正整数',trigger:['input','blur']},{validator:(_,value,callback)=>{//检查唯一性if(!checkUnique(value,fieldName)){callback(newError('值不能重复'));}else{callback();}},trigger:['input','blur']}];};```###注意事项1.**实时验证性能**：由于每次输入都会检查所有字段，如果字段很多可能会影响性能，但四个字段通常没问题。2.**空值处理**：在唯一性检查中，我们排除了空值（因为空值会由required规则处理），避免多个空值触发重复错误。3.**输入框类型**：如果希望限制只能输入数字，可以考虑使用`type="number"`，但注意要屏蔽`+`、`-`、`e`等字符（如引用[2]所示）。4.**错误提示顺序**：规则数组中的顺序决定了验证顺序，先验证必填，再验证格式，最后验证唯一性。###完整示例（结合正数验证和唯一性验证）```html<template><el-form:model="form":rules="rules"ref="formRef"><!--四个输入框--></el-form></template><scriptsetup>import{reactive,ref}from'vue';constformRef=ref(null);constform=reactive({field1:'',field2:'',field3:'',field4:''});//检查唯一性（排除当前字段）constcheckUnique=(value,excludeField)=>{if(value==='')returntrue;//空值不参与唯一性检查（由required处理）constotherValues=Object.entries(form).filter(([key])=>key!==excludeField).map(([,val])=>val);return!otherValues.includes(value);};constcreateUniqueRule=(fieldName)=>{return[{required:true,message:'不能为空',trigger:['blur','change']},//正整数验证{pattern:/^[1-9]\d*$/,message:'必须为正整数',trigger:['input','blur']},//唯一性验证{validator:(_,value,callback)=>{if(!checkUnique(value,fieldName)){callback(newError('值不能重复'));}else{callback();}},trigger:['input','blur']}];};construles=reactive({field1:createUniqueRule('field1'),field2:createUniqueRule('field2'),field3:createUniqueRule('field3'),field4:createUniqueRule('field4')});</script>```这样，四个输入框都要求：1.必填2.必须是正整数3.四个值互不相同且在输入时就会实时提示。[^1]:引用[1]提供了限制正整数的正则表达式。[^2]:引用[2]提到当输入框类型为number时需要屏蔽一些字符。[^3]:引用[3]展示了如何限制小数位数。[^4]:引用[4]提供了在ElementPlus中使用正则表达式进行表单验证的例子。[^5]:引用[5]提到了在AntDesignVue中获取输入值的方法。§§相关问题§§1.Vue中如何实现表单字段的联动验证？2.如何在Vue表单验证中优化大量字段的唯一性检查性能？3.ElementPlus表单验证规则中trigger事件的选择有哪些注意事项？</think>### Vue 中实现四个输入框内容唯一性验证的完整解决方案
#### 一、核心实现代码
```html
<template>
<el-form :model="form" :rules="rules" ref="formRef">
<el-form-item label="字段1" prop="field1">
<el-input v-model="form.field1" placeholder="请输入正整数" />
</el-form-item>
<el-form-item label="字段2" prop="field2">
<el-input v-model="form.field2" placeholder="请输入正整数" />
</el-form-item>
<el-form-item label="字段3" prop="field3">
<el-input v-model="form.field3" placeholder="请输入正整数" />
</el-form-item>
<el-form-item label="字段4" prop="field4">
<el-input v-model="form.field4" placeholder="请输入正整数" />
</el-form-item>
</el-form>
</template>
<script setup>
import { reactive, ref } from 'vue';
// 表单数据
const formRef = ref(null);
const form = reactive({
field1: '',
field2: '',
field3: '',
field4: ''
});
// 正整数正则表达式 (引用[1]和[4]的优化)
const positiveIntegerPattern = /^[1-9]\d*$/; // 禁止前导零的正整数
// 唯一性验证函数
const checkUnique = (currentValue, currentField) => {
const otherValues = Object.entries(form)
.filter(([key]) => key !== currentField)
.map(([, val]) => val);
return !otherValues.includes(currentValue);
};
// 动态生成规则函数
const createFieldRules = (fieldName) => [
// 必填规则
{ required: true, message: '不能为空', trigger: ['blur', 'change'] },
// 正整数规则 (引用[1])
{
pattern: positiveIntegerPattern,
message: '必须为正整数',
trigger: ['input', 'blur']
},
// 唯一性规则 (实时验证)
{
validator: (_, value, callback) => {
if (value && !checkUnique(value, fieldName)) {
callback(new Error('值不能重复'));
} else {
callback();
}
},
trigger: ['input', 'blur'] // 输入时实时验证
}
];
// 表单验证规则
const rules = reactive({
field1: createFieldRules('field1'),
field2: createFieldRules('field2'),
field3: createFieldRules('field3'),
field4: createFieldRules('field4')
});
</script>
```
#### 二、关键实现说明
1. **正整数验证正则表达式**：
```javascript
const positiveIntegerPattern = /^[1-9]\d*$/;
```
- 匹配规则：以1-9开头，后跟任意数字
- 排除：0、负数、小数、科学计数法（e/E）
- 符合引用[1]和[4]的正则要求
2. **唯一性验证逻辑**：
```javascript
const checkUnique = (currentValue, currentField) => {
// 获取其他三个字段的值
const otherValues = Object.entries(form)
.filter(([key]) => key !== currentField)
.map(([, val]) => val);
return !otherValues.includes(currentValue);
};
```
3. **实时验证触发**：
```javascript
trigger: ['input', 'blur'] // 输入时立即触发验证
```
4. **动态规则生成**：
```javascript
const createFieldRules = (fieldName) => [ ... ]
```
- 为每个字段自动生成包含必填、正数和唯一性验证的规则集
#### 三、功能特点
1. **实时反馈**：
- 输入时立即提示重复错误
- 修改任一字段会触发其他字段的重新验证
2. **多重验证**：
- 先验证非空
- 再验证正整数格式
- 最后验证唯一性
3. **错误提示**：
- 未填写："不能为空"
- 格式错误："必须为正整数"
- 重复值："值不能重复"
#### 四、补充优化
如果需要防止用户输入非法字符（如：+ - e），可添加键盘事件（引用[2]）：
```html
<el-input
v-model="form.field1"
@keydown="limitInputValue"
/>
```
```javascript
// 限制非法字符输入
const limitInputValue = (e) => {
if (['e', 'E', '+', '-'].includes(e.key)) {
e.preventDefault();
}
};
```
[^1]: 引用正则表达式限制正整数输入
[^2]: 引用屏蔽非法字符输入的方法
[^4]: 引用Element Plus表单验证规则实现方式
最低0.47元/天 解锁文章
扫一扫
5829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
