el-input 限制输入正数，保留三位小数

DazzlingPing

已于 2022-12-14 14:01:32 修改

阅读量870

点赞数

分类专栏： el-form 自定义校验规则文章标签：前端 elementui vue

于 2022-12-14 11:15:39 首次发布

本文链接：https://blog.csdn.net/dazzlingping/article/details/128313446

版权

el-form 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

自定义校验规则

1 篇文章 0 订阅

订阅专栏

1、正数值

2、最长三位小数

3、必填/非必填

实现方法

el-form表单验证自定义校验规则

全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../3rd/elementui/index.2.15.9.css">
</head>
<body>
  <div id="app">
    <el-form :model="ruleForm" :rules="rules" :inline="true" ref="ruleForm" class="my-ruleForm">
      <el-form-item prop="supplierName" label="审批人">
        <el-input v-model="ruleForm.supplierName" type="text" placeholder="请输入" @input ="ruleForm.supplierName=ruleForm.supplierName.replace(/[^0-9.]/g,'')"></el-input>
      </el-form-item>
      <el-form-item prop="supplierName2"label="审批人2" >
        <el-input v-model="ruleForm.supplierName2" type="text" placeholder="请输入" @input ="ruleForm.supplierName2=ruleForm.supplierName2.replace(/[^0-9.]/g,'')"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submit" >提交</el-button>
    </el-form>
  </div>
  <script src="../../3rd/vue/vue.min.js"></script>
  <script src="../../3rd/elementui/index.2.15.9.min.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data(){
        var threeNumber = (rule, value, callback) => {
          if(value==''||value==null||value==undefined){
            if(rule.required){
              callback(new Error("请输入"));
            }
          }else if(Number(value)<0 || Number(value)==0){
            callback(new Error("正数值，限三位小数"));
          }else if ((String(value).length - (String(value).indexOf(".") + 1)) > 3 && String(value).indexOf(".") >= 0) {
            callback(new Error("正数值，限三位小数"));
          } else {
            callback();
          }
        }
        return{
          ruleForm:{
            supplierName:''
          },
          rules:{
            supplierName: [
              { required: true,  validator: threeNumber,trigger: ['blur', 'change'] }
            ],
            supplierName2: [
              { validator: threeNumber,trigger: ['blur', 'change'] }
            ],
          }
        }
      },
      methods:{
        submit() {
          let self = this
          this.$refs['ruleForm'].validate((valid, obj) => {
            if (valid) {
              console.log(valid)
            } else {
              return false
            }
          })
        }
      }
    })
  </script>
</body>
</html>