三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑

:prop="form.myProp !== null && form.myProp != '' ? 'myProp' : ''"

这种情况下，当 form.myProp 非空时，虽然显示有校验属性，但是使用 formRef.validate 触发整个表单的校验时，这个 myProp 属性的 表单不会触发校验。

动态设置 prop 校验属性的需求遇到过不少，但是都是根据关联的其他属性控制的，没有遇到多根据自身表单值控制 prop 的情况。尝试手动调用 validateField('myProp') 的时候报 Vue props 错误的。

推断：这种根据自己值设置 prop 后，实际上这个表单并没有刷新到最新的校验 prop 值，所以表单校验时不认为它包含校验规则。

多表单校验

el-form-item 内部如果包含多个表单，默认校验失败时会将所有表单高亮，例如：

虽然只有第二个表单没有输入，但是校验失败时会同时高亮两个表单。怎么只对第二个表单高亮呢？

解决办法是用嵌套：
外层 el-form-item 是正常的信息，内层对第二个表单再次嵌套 el-form-item 指定校验属性：

<el-form-item label="任务执行时间：" required>
    <el-select v-model="data.executeCycle">
      <el-option label="时" value="hour">时</el-option>
      <el-option label="日" value="day">日</el-option>
      <el-option label="周" value="week">周</el-option>
    </el-select>
    <el-form-item prop="tme">
      <el-date-picker v-model="data.executeTime"
		      type="datetime"
		      value-format="yyyy-MM-dd HH:mm:ss"
		      placeholder="选择日期时间"
		      default-time="00:00:00">
      </el-date-picker>
    </el-form-item>
</el-form-item>

将日期输入框包裹在新的 el-form-item 中，外层的 el-form-item 添加 requred 显示前面的红星，就可以只对该属性校验了，将第二个表单再嵌套后，校验结果就正常了：

嵌套表单如果是放在 el-form 中，直接嵌套后会出现样式错乱问题：

解决办法是为嵌套在内部的 el-form-item 添加额外样式：

<el-form-item label="XXX：">
  <el-radio-group v-model="a.name" >
    <el-radio-button label="0">否</el-radio-button>
    <el-radio-button label="1">是</el-radio-button>
  </el-radio-group>
  <el-form-item style="margin-top: -23px;margin-left: 50px;" v-if="a.continuity === '1'" prop="continuityNum">
    <el-input v-model="a.b" ></el-input>
  </el-form-item>
</el-form-item>

这样就齐了：

复杂属性

<el-form-item label="执行周期 " prop="config.gapTime">
            <el-input    type="number" :min="1" v-model="data.config.gapTime">
            </el-input>
  <el-form-item>

此时，该属性对应的 rules 定义也必须是对象：

rules: {
        config: {
          gapTime: [
            { required: true, message: '请输入执行周期', trigger: 'blur' },
          ],
        },
      },

否则，就会出现明明已经输入了值，但是还是提示校验错误信息。

v-if 控制的表单不触发校验

如果一个表单需要校验，那么它不应该使用 v-if 控制，否则初始时组件没有创建，校验规则就不会绑定，也不会生效。例如下面的例子，根据任务类型，配置执行时间：

<el-form-item label="执行时间："
              v-if="type === '单次任务'"
              prop="executeTime">
  <el-date-picker 
                  v-model="form.executeTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择执行时间">
  </el-date-picker>
</el-form-item>
<el-form-item label="执行Cron表达式："
              v-if="type === 'Cron任务'"
              prop="executeCron">
  <el-input  v-model="form.executeCron" placeholder="调度周期">
  </el-input>
</el-form-item>

初始化时第一个时间表单如果没有，那么当它重新生成时，上面的校验无效。

这个问题的根源是两个 el-form 元素没有作区分标识，v-if 动态切换时，Vue 内部误以为是同一个元素，导致跳转时触发校验。

解决办法：使用 v-show/v-if 控制显示和隐藏，同时为它们的给 el-form-item 元素添加不同的 key 属性值。

动态显示隐藏的表单切换后

动态显示隐藏的表单切换后，应该清空上次的表单校验结果：
this.$refs.myForm.clearValidate('xx');

否则相同位置的校验结果会混乱的。

表格数据校验

参考：https://blog.csdn.net/qq_43523725/article/details/123214343

核心：
1、必须使用嵌套属性，即表格列表的数组应该是某个属性的值。例如：

{
  elTableModel: {
       tableData: [] 
  }
}

2、外层的 el-form 的 :model 属性是必须的，否则输入不会和校验属性绑定。
demo:

<el-form :model="elTableModel" ref="propForm"  :rules="rules">
          <el-table :data="elTableModel.tableData">
            <el-table-column  prop="fieldName" label="AAA">
              <template slot-scope="scope">
                <el-form-item label-width="0px"
                              :prop="'tableData.'+scope.$index + '.name'"
                              :rules='logicTableRules.name'>
                  <el-input v-model="scope.row.name"  clearable>
     </el-input>
     </el-form-item>
   </template>
 </el-table-column>
 </el-table>
 </el-form>

自定义校验规则

注意事项： 自定义校验规则的时候，必须保证各个分支且至少有一个分支执行 callback() 函数，否则会导致表单校验操作 validate 阻塞而无返回结果。

例如，自定义一个正则限定 APIUrl 输入：

apiUrl: [
            { validator: (rule, value, callback) => {
                const pattern = /^https?:\/\/([a-zA-Z0-9\_]|[_\/\.:#\-]){2,50}$/;
                if (value === null || value === '') {
                  callback(new Error(`请输入接口URL`));
                } else if (!pattern.test(value)) {
                  callback(
                    new Error(
                      'http:// 或 https:// 开头',
                    ),
                  );
                } else {
                  callback();
                }
              },
              required: true, trigger: ['blur']


## 算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   ![](https://img-blog.csdnimg.cn/img_convert/63ebd849d0b1b2c559b56e794e0b34ce.webp?x-oss-process=image/format,png)

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中...(img-3RvUl3nC-1718774542864)]

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！