element el-form的表单自定义规则

最新推荐文章于 2024-03-26 10:27:32 发布

JSN___不像码农的码农

最新推荐文章于 2024-03-26 10:27:32 发布

阅读量1k

点赞数

分类专栏： js vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/JSN___/article/details/111633229

版权

js 同时被 2 个专栏收录

75 篇文章 0 订阅

订阅专栏

vue

49 篇文章 0 订阅

订阅专栏

这篇博客介绍了在Vue.js中如何使用自定义规则进行表单验证，特别是针对金额、整数和比率的输入限制。通过示例代码展示了正则表达式验证，确保用户输入符合指定的数值范围和精度要求，从而提高前端数据的准确性。

摘要由CSDN通过智能技术生成

element el-form的表单自定义规则

<script lang="ts">
// import { AccountDTO } from "@/apis/accountGroup";
import Vue, { PropType } from "vue";
export default Vue.extend({
  name: "riskManagement",
  data() {
    const moneyRules = (rule: any, value: any, callback: any) => {
      const res = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (value != null && value != "") {
        if (!res.test(value) || value > 1000000000 || value < 0) {
          callback(new Error("最多保留两位小数,值范围在0-1000000000之间!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const numbersRules = (rule: any, value: any, callback: any) => {
      const reg = /^\+?[1-9][0-9]*$/;
      if (value != null && value != "") {
        if (!reg.test(value) || value > 1000000000 || value < 0) {
          callback(new Error("请输入整数,值范围在0-1000000000之间!"));
        } else {
          callback();
        }
      } else {
        callback();
      }
    };
    const rateRules = (rule: any, value: any, callback: any) => {
              const res = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
              if (value != null && value != "") {
                if (!res.test(value) || value > 100 || value < 0) {
                  callback(new Error("最多保留两位小数,值范围在0-100之间!"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
    };

在这里插入图片描述