el-input相关校验，包含数字校验，qq，邮箱，电话

0-100的数字，保留两位小数

方案一

校验提示

 const numberCheck= (rule, value, callback) => {
      const checkReg = /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/;
      if (checkReg.test(value)) {
        callback();
      } else {
        callback(new Error("0-100的数字，仅支持两位小数点"));
      }
    };

完整代码：

<div id="app">
  <el-form :model="form_01" :rules="rule_01" size="mini" label-width="200px">
    <el-form-item label="0-100(可保留两位小数)" prop="number">
      <el-input v-model="form_01.number"></el-input>
    </el-form-item>
  </el-form>
</div>
 
<script>
const numberCheck_01 = (rule, value, callback) => {
  const checkReg = /^(((\d|[1-9]\d)(\.\d{1,2})?)|100|100.0|100.00)$/;
  if (checkReg.test(value)) {
    callback();
  } else {
    callback(new Error("0-100的数字，仅支持两位小数点"));
  }
};
new Vue(
  {
    el: "#app",
    data() {
      return {
        form_01: {
          number: null,
        },
        rule_01: {
          number: [
            { required: true, message: "不可为空", trigger: "change" },
            { validator: numberCheck_01, trigger: ["blur", "change"] }
          ]
        }
      }
    }
  }
)
</script>

方案二

**不符合规则输入框禁止输入 **https://code.juejin.cn/pen/7273755492768284709

<div id="app">
  <div class="item">
    <label>
      0-100可保留两位小数(输入时限制，不符合规则禁止输入)
    </label>
    <el-input size="mini" :value="form_01.number_02" @input="form_01_number_02_input"> 
    </el-input>
  </div>
</div>
 
<script>
new Vue(
  {
    el: "#app",
    data() {
      return {
        form_01: {
          number_02: null,
        }
      }
    },
    methods: {
      form_01_number_02_input(value) {
        if (+value >= 100) {
          this.form_01.number_02 = 100;
          return;
        }
        this.form_01.number_02 = value
          .replace(/^\D*(\d*\.?\d{0,2})?.*$/, "$1")
          .replace(/^(\d{0,2})?\d*$/, "$1");
      }
    }
  }
 
)
</script>
 
<style lang="less">
#app {
  .item {
    display: flex;
    margin-bottom: 50px;
    >label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
  }
  }
  
}
</style>

0-100的数字（整数）

const numberCheck= (rule, value, callback) => {
  const testReg = /^(?:[1-9]?\d|100)$/;
  if (testReg.test(value)) {
    callback();
  } else {
    callback(new Error("0-100的数字"));
  }
};
 
scoreWeight: [
  { required: true, message: "请输入分数", trigger: ["blur", "change"] },
  {validator: numberCheck,trigger: ["blur", "change"]}
]

仅允许输入数字不限制数字的大小
写法（一）

 <el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" 
  size="small" width="50"  placeholder="请输入数字">

写法（二）

<el-input
    size="mini"
    :value="frequency"
    @input="value => {
       this.frequency= value.replace(/^(\d*)\D$/,'$1')
    }"
></el-input>

仅输入数字，包含小数点

 <el-input type="text" onkeyup="value=value.replace(/[^\d\.]/g, '') 
                .replace(/^\./g, '') 
                .replace(/\.{2,}/g, '.') 
                .replace('.', '$#$') 
                .replace(/\./g, '')
                .replace('$#$', '.')"
  size="small" width="50"  placeholder="请输入数字">

保留两位小数，不限制大小
方案（一）

 .replace(/[^\-\d{1,}.\d{1,}|\-\d{1,}]/g, "")
    .replace(".", "$#$")
    .replace(/\./g, "")
    .replace("$#$", ".")
    .replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");

方案（二）

<el-input
  :value="score"
  size="mini"
  placeholder="请输入分数"
  @input="value => {
     this.score = value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1');
  }"
></el-input>

大于0 的数字，可包含两位小数

 onkeyup="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, "$1");

  <el-input
     :value="score"
     size="mini"
     placeholder="请输入分数"
     @input="value => {
        this.score = value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1');
        }"
  ></el-input>

手机号校验

const checkMobile = (rule, value, cb) => {
const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
 if (regMobile.test(value)) {
     // 合法的手机号码
     return cb();
  }
  cb(new Error("手机号码格式不正确"));
};
phoneCode: [
     { required: true, message: "手机号不能为空", trigger: "blur" },
     { validator: checkMobile, trigger: ["blur", "change"] }
 ]

邮箱的校验

 const checkEmail = (rule, value, callback) => {
      const mailReg = /([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      if (mailReg.test(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的邮箱格式'))
      }
    };

QQ校验

<template>
  <el-form size="mini" ref="form" :model="form" :rules="rules" label-width="60px">
     <el-form-item label="QQ" prop="qq">
        <el-input v-model="form.qq"></el-input>
     </el-form-item>
  </el-form>
</template>
 
<script>
const checkQq = (rule, value, cb) => {
  const regQQ = /^[1-9][0-9]{4,9}$/;
  if (!value) {
    return callback(new Error("qq不可为空"));
  }
  if (regQQ.test(value)) {
    // 合法的手机号码
    return cb();
  }
  cb(new Error("qq格式不正确"));
};
export default {
  name: "form",
  data() {
    return {
      form: {
        qq: ""
      },
      rules: {
        qq: [
          { required: true, message: "qq不可为空", trigger: "blur" },
          { validator: checkQq, trigger: ["blur", "change"] }
        ]
      }
    };
  }
</script>

————————————————
版权声明：本文为CSDN博主「好喝的西北风」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43340372/article/details/122584878