Element UI —— el-form 自定义验证规则

最新推荐文章于 2025-04-01 11:03:07 发布

daisy0328

最新推荐文章于 2025-04-01 11:03:07 发布

阅读量3.7k

点赞数 1

分类专栏： web前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/daisy0328/article/details/114274622

版权

web前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍了如何在Element UI中自定义表单验证规则，特别是针对金额不能超过两位小数的场景。通过HTML和JavaScript代码示例，展示了如何实现这一功能。

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

自定义验证规则：金额不能超过两位小数

html代码：

      <el-form
        :model="formData"
        :rules="rules"
        ref="msgForm"
        label-width="120px"
      >
        <el-form-item label="商品名称:" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格:" prop="fee">
          <el-input v-model="formData.fee"></el-input>
        </el-form-item>
        <el-form-item label="商品划线价:" prop="marking_fee">
          <el-input v-model="formData.marking_fee"></el-input>
        </el-form-item>
        <el-form-item label="商品规格:">
          <el-input v-model="formData.specifications"></el-input>
        </el-form-item>
        <el-form-item label="商品佣金:" prop="commission_fee">
          <el-input v-model="formData.commission_fee"></el-input>
        </el-form-item>
        <el-form-item label="商品说明:">
          <el-input
            v-model="formData.description"
            type="textarea"
            maxlength="100"
            show-word-limit
            :autosize="{ minRows: 2 }"
            placeholder="请输入商品说明"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="$router.go(-1)">返回</el-button>
      <el-button type="primary" @click="submit" plain>保存</el-button>

js代码: （ vue ）

  data() {
    //自定义金额验证规则
    let checkMoney = (rule, value, callback) => {
      let regMoney = /^\d+(\.\d{1,2})?$/;
      if (value && !regMoney.test(value)) {
        callback(new Error("金额不能超过两位小数"));
      } else {
        return callback();
      }
    };
    return {
      formData: {
        name: "",
        fee: null,
        marking_fee: null,
        commission_fee: null,
      },
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        fee: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          { validator: checkMoney, trigger: "blur" },
        ],
        //使用自定义验证规则   validator 属性
        marking_fee: [{ validator: checkMoney, trigger: "blur" }],
        commission_fee: [{ validator: checkMoney, trigger: "blur" }],
      },
    };
  },
   methods:{
   		//表单验证
   		submit(){
   			this.$refs.msgForm.validate().then(valid()=>{
   				if(valid){
   					//提交表单
   				}else{
   					return false;
				}
   			})
   		}
   }