ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue绕过rules自定义编写动态校验 [打印本页]
作者: 怀念夏天    时间: 2024-12-15 14:13
标题: vue绕过rules自定义编写动态校验
本日犯了个低级错误，虽然走了许多弯路，但这个过程还是值得记录一下
例子如下，有两个输入框：

第一个是套餐选择下拉框，可以下拉选择三个内容

第二个要根据上面的套餐选择三个选项来决定怎么显示，使用v-if（第一个下拉框的值来做条件显示）
（1）假如套餐选择选招牌冰淇淋，第二个输入框就是招牌冰淇淋下拉框，
就以下拉框的情势显示口味

（2）假如套餐选择选小吃，第二个输入框就是小吃输入框，
就让客户自己填写什么小吃



（2）假如套餐选择选冷饮，第二个输入框就是冷饮输入框，
就让客户自己填写什么冷饮


然后无论第一个套餐选择选哪个选项，都要对第二个框进行非空、长度规则等校验，剩下的两个没选的就不做校验，这里其实v-if取了第一个下拉框的值来对第二个输入框做条件显示的时间，别的两个就不会显示，即不走rules，但我没把第二个输入框的规则写在rules里面，自己做了一个验证规则
具体逻辑就是在确定按钮提交表单时，调取this.validateForm()方法去校验一下第一下选的是哪个选项，再决定去校验背面的哪个输入框

焦点校验代码： 

 
详细代码： 

  1. <!--第一个下拉框-->
  2. <el-form-item label="套餐选择" prop="setMealType">
  3.   <el-select v-model="form.setMealType" placeholder="请选择变更类型" size="small" clearable>
  4.     <el-option label="招牌冰淇淋" value="1"></el-option>
  5.     <el-option label="小吃" value="2"></el-option>
  6.     <el-option label="冷饮" value="3"></el-option>
  7.   </el-select>
  8. </el-form-item>
  9. <!--        第二个输入框(1号)-->
  10. <el-form-item label="招牌冰淇淋" prop="newVehicleColour" v-if="form.setMealType === '1'">
  11.   <el-select v-model="form.newVehicleColour" placeholder="请选择冰淇淋口味" filterable clearable size="small">
  12.     <el-option label="香草冰淇淋" value="1"></el-option>
  13.     <el-option label="牛奶红枣" value="2"></el-option>
  14.     <el-option label="薄荷香芋" value="3"></el-option>
  15.   </el-select>
  16.   <div>
  17.     <span v-if="errors.newVehicleColour" class="err">口味不能为空!</span>
  18.   </div>
  19. </el-form-item>
  20.         <!--        第二个输入框(2号)-->
  21. <el-form-item label="小吃" prop="newMotornumber" v-if="form.setMealType === '2'">
  22.   <el-input v-model="form.newMotornumber"  placeholder="请输入小吃" maxlength="30" ></el-input>
  23.   <span v-if="errors.newMotornumber" class="err">小吃不能为空!</span>
  24. </el-form-item>
  25.         <!--        第二个输入框(3号)-->
  26. <el-form-item label="冷饮" prop="newBatteryNum" v-else-if="form.setMealType === '3'">
  27.   <el-input v-model="form.newBatteryNum" placeholder="请输入冷饮" maxlength="30" />
  28.   <span v-if="errors.newBatteryNum" class="err">冷饮不能为空!</span>
  29. </el-form-item>
复制代码
 data和rules：(data声明errors , rules仅对第一个输入框校验)
  1. data() {
  2.       return {
  3.         // 遮罩层
  4.         loading: true,
  5.         //表单参数
  6.         form: {},
  7.         // 错误信息
  8.         errors: {},
  9.         // 表单校验
  10.         rules: {
  11.           changeType: [{
  12.             required: true,
  13.             message: "请选择套餐类型",
  14.             trigger: "blur"
  15.           }],
  16.         }
  17.       };
  18.     },
复制代码
表单重置将this.errors置空)
  1. // 表单重置
  2.       reset() {
  3.         this.form = {
  4.           id: null,
  5.             ...
  6.             ...
  7.           createBy: null,
  8.           createTime: null,
  9.           updateBy: null,
  10.           updateTime: null,
  11.           remark: null
  12.         };
  13.         this.errors = {};
  14.         this.resetForm("form");
  15.       },
复制代码
校验规则:
  2.       // 自定义校验方法
  3.       validateField(field) {
  4.         this.errors[field] = '';
  5.         if (!this.form[field]) {
  6.           this.errors[field] = `${field} 不能为空!`;
  7.         }
  8.       },
  9.       // 校验所有字段
  10.       validateForm() {
  11.         this.errors = {};
  13.         if (this.form.changeType === '1') {
  14.           this.validateField('newVehicleColour');
  15.         } else if (this.form.changeType === '2') {
  16.           this.validateField('newMotornumber');
  17.         } else if (this.form.changeType === '3') {
  18.           this.validateField('newBatteryNum');
  19.         }
  20.         // 检查是否有错误
  21.         for (const key in this.errors) {
  22.           if (this.errors[key]) {
  23.             // this.$message.error(this.errors[key]);
  24.             return false;
  25.           }
  26.         }
  27.         return true;
  28.       },
复制代码
重置按钮:
  1. /** 重置按钮操作 */
  2.       resetQuery() {
  3.         this.errors = {};
  4.         this.resetForm("queryForm");
  5.         this.handleQuery();
  6.       },
复制代码
表单提交按钮:
  1. /** 提交按钮 */
  2.       submitForm() {
  3.         if (this.validateForm()) {
  4.           // 表单验证通过
  5.           console.log('表单验证通过', this.form);
  6.           this.$refs["form"].validate(valid => {
  7.             if (valid) {
  8.               if (this.form.id != null) {
  9.                 update(this.form).then(response => {
  10.                   this.$modal.msgSuccess("修改成功");
  11.                   this.open = false;
  12.                   this.getList();
  13.                 });
  14.               } else {
  15.                 add(this.form).then(response => {
  16.                   this.$modal.msgSuccess("新增成功");
  17.                   this.open = false;
  18.                   this.getList();
  19.                 });
  20.               }
  21.             }
  22.           });
  23.           // 这里可以添加提交表单的逻辑
  24.         } else {
  25.           // 表单验证失败
  26.           console.log('规则验证失败', this.errors);
  27.         }
  28.       },
复制代码
自定义提示语样式
  1. <style>.err {
  2.   color: red;
  3.   font-size: 12px;
  4. }
  5. </style>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4