在uni-app中，模拟element-ui中 form表单验证

最新推荐文章于 2025-03-05 01:34:52 发布

互联网的砌砖人

最新推荐文章于 2025-03-05 01:34:52 发布

阅读量561

点赞数

文章标签： ui 前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/m0_65301400/article/details/126033265

版权

这篇博客介绍了一个JavaScript函数，用于封装表单验证规则，支持必填、最小长度、最大长度和自定义正则表达式验证。验证规则借鉴了ElementUI的规则，可以方便地集成到Vue项目中，通过原型挂载实现全局调用。示例展示了如何定义验证规则和调用验证方法，当表单验证通过后会执行指定回调函数。

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

1、表单验证规则封装方法

/**
 * validate 表单验证规则
 * data :  object  需要验证的表单对象
 * rules:  object  表单验证规则，借鉴element ui 规则
 * func(): function    表单验证通过之后，执行的代码块
 * 
 */
function validate(data, rules, func = function() {}) {
   let message = '';
   for (let index in Object.keys(rules)) {
      let array = rules[Object.keys(rules)[index]]
      for (let dex in array) {
         for (let keyword in array[dex]) {
            switch (keyword) {
               case 'required': // 必填
                  if (array[dex][keyword] && !data[Object.keys(rules)[index]]) {
                     message = array[dex]['message']
                  }
                  break;
               case 'min': // 最小长度
                  if (data[Object.keys(rules)[index]].length < array[dex][keyword]) {
                     message = array[dex]['message']
                  }
                  break;
               case 'max': // 最大长度    
                  if (data[Object.keys(rules)[index]].length > array[dex][keyword]) {
                     message = array[dex]['message']
                  }
                  break;
               case 'pattern': // 自定义正则验证
                  if (!array[dex][keyword].test(data[Object.keys(rules)[index]])) {
                     message = array[dex]['message']
                  }
                  break;
            }
            if (message) {
               this.common.Toast(message);
               return false;
            }
         }
      }
   }

   if (!message) {
      func();
   }
}

export default validate;

2、方法挂载

import validate from '@/utils/validate.js';

Vue.prototype.$Validate = validate; // 表单验证

3、定义验证规则

formData: {
 area: '',
 num: '', 
},

rules: {
 area: [{
  required: true,
  message: '请选择区域'
 }],
 num: [{
  required: true,
  message: '请输入总数'
 }],
}

4、验证表单数据

this.$Validate(this.formData, this.rules, () => {
       // 表单验证通过
});