vue+element 正则表达式进行表单验证

最新推荐文章于 2025-05-17 16:16:59 发布

转载最新推荐文章于 2025-05-17 16:16:59 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lilelile/p/10441664.html

文章标签：

#javascript #ViewUI

本文详细介绍了使用Element UI组件库创建表单，并实现对输入字段的验证，包括非负整数、价格格式及百分比的验证规则。通过具体示例展示了如何设置验证规则并应用于表单元素。

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

<template>  
    <el-form :model="form" label-width="115px" ref="form" :rules="rules" label-position="left">
        <el-row :gutter="20"> 
        <el-col :span="12">
            <el-form-item label="同期最大购买数" prop="pkspace_num">
            <el-input v-model="form.pkspace_num" auto-complete="off" clearable></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="价格"  prop="price" >
            <el-input v-model="form.price" auto-complete="off" clearable><template slot="append">{{price_txt}}</template></el-input>
            </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="12">
            <el-form-item label="C端最大折扣率"  prop="c_disrate">
            <el-input v-model="form.c_disrate" auto-complete="off" clearable></el-input>
            </el-form-item>
        </el-col> 
        </el-row> 
    </el-form> 
</template>

<script>
  export default {
    name: "creatRent",
    data(){ 
      let patter = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      let isNumber = (rule, value, callback) => {
        if (!patter.test(value)) {
          return callback(new Error('必须非负整数或至多保留两位小数'))
        } else {
          callback()
        }
      };
      let percent = /^(?:[1-9]?\d|100)$/;
      let isPercent = (rule, value, callback) => {
        if (!percent.test(value)) {
          return callback(new Error('请输入0-100的整数'))
        } else {
          callback()
        }
      };
      let num = /^(0|\+?[1-9][0-9]*)$/;
      let isNum = (rule, value, callback) => {
        if (!num.test(value)) {
          return callback(new Error('请输入非负整数'))
        } else {
          callback()
        }
      };
      return { 
        form: { 
          pkspace_num: '', 
          price:'', 
          c_disrate:'', 
        },
        rules: { 
          pkspace_num: [
            { required: true, message: '同期最大购买数不能为空', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' },
            { validator:isNum}
          ], 
          price: [
            { required: true, message: '价格不能为空',trigger: 'blur' },
            { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' },
            { validator:isNumber}
          ], 
          c_disrate: [
            { required: true, message: 'C端最大折扣率不能为空', trigger: 'blur' },
            { min: 1, max: 3, message: '长度在 1 到 3 个字符', trigger: 'blur' },
            { validator:isPercent}
          ], 
        }, 

      }
    }, 


  }
</script>

转载于:https://www.cnblogs.com/lilelile/p/10441664.html