el-from表单校验自定义函数

夏天爱劳动

已于 2022-04-14 15:53:52 修改

阅读量943

点赞数 1

文章标签： javascript 前端 vue.js

于 2021-12-16 17:41:01 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_53504747/article/details/121979688

版权

本文介绍了如何在面对大量数据的表格中，通过自定义rules.js实现动态校验，配合虚拟滚动技术解决性能问题，重点讲解了校验函数的创建和使用步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

因为需求，一个表格需要动态校验数据，当然可用表单自带的动态校验方法，但是我这个表格由于数据量庞大，甚至达到了1000多行，如果全部展示在页面上，直接导致页面卡死或者输入内容慢的一批。所以我使用了虚拟滚动，这样数据不会卡，但是表单自带的校验规则肯定不行了，所以需要自己写一个校验规则。嘿嘿（这里推荐vxe-table的虚拟滚动）

一、自定义函数创建一个rules.js是什么？

import { MessageBox, Message, Loading, Notification } from 'element-ui'
const _MessageBox = MessageBox
let common = {
    //表单校验
    checkRules(params, rules) {
        //表单校验
        for (let j = 0; j < params.length; j++) {
            for (let key in rules) {
                let arr = rules[key];
                for (let i = 0; i < arr.length; i++) {
                    if (params[j].hasOwnProperty(key)) {
                        let rule = arr[i],
                            val = params[j][key] === 0 ? "0" : params[j][key] || "";
                        if (rule.required && val === "") {
                            _MessageBox.confirm("你好！第" + Number(j + 1) + '行' + 
                         rule.message, "提示", {
                                confirmButtonText: "确定",
                                type: "warning"
                            })
                                .then(() => { })
                                .catch(() => { });
                            return false;
                        }
                        if (rule.pattern && !rule.pattern.test(val)) {
                            //正则
                            _MessageBox.confirm("你好！第" + Number(j + 1) + '行' + 
                          rule.message, "提示", {
                                confirmButtonText: "确定",
                                type: "warning"
                            })
                                .then(() => { })
                                .catch(() => { });
                            return false;
                        }
                    }
                }
            }

        }
        return true;
    }

}
export default common;

二、使用步骤

1.对应页面写就好了。

import rules from "@/utils/rules";

    let rulesStatus = rules.checkRules(
            this.ruleForm.orderAuxDTOS,
            this.rules
          );

总结

 //      //数组对象去重
      //   let nArr = itemList.filter((element, index, self) => {
      //     return (
      //       self.findIndex(
      //         x => x.code === element.code && x.version === element.version
      //       ) === index
      //     );
      //   });

当然我这里只是为校验表格，如需要校验表单直接把表单放进去，写写逻辑就好了