美文网首页
el-input相关校验,包含数字校验,qq,邮箱,电话

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

作者: 泪滴在琴上 | 来源:发表于2023-09-11 14:54 被阅读0次

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

相关文章

  • 前端常用正则校验

    校验邮箱方法 校验电话 校验手机号

  • el-input 数字校验

    项目中使用 Vue + elementUi 搭建后台管理系统,在输入框进行数字校验的时候不知为何官网的方法不起作用...

  • iview: 表单校验

    表单校验 1、 手机号码 校验 2、 8位数包含字母和数字密码、再次输入密码 校验 3、 多个下拉选择框 必选校验...

  • 设计模式之责任链模式

    抽象处理者 校验的具体规则类 校验用户昵称 校验邮箱 校验状态 校验密码 校验规则客户端 输出结果

  • 输入框常用检验

    禁止输入空格 手机号 电话号码 邮箱校验

  • UITextField文字字数检验方法

    邮箱校验 或者 中文检验 只允许输入字母数字 中文输入时字数限制 添加监听 实现方法 移除监听 字数检验 谓词校验...

  • 电话邮箱校验工具类

    针对这个做针对性的正则修改比较简单 欢迎关注和点赞

  • 25个常用的正则表达式

    1、手机号码的校验 2、身份证的校验 3、邮箱的校验 4、URL的校验 5、IPv4的校验 6、16进制颜色的校验...

  • 常用正则表达式

    1、手机号码的校验 2、身份证的校验 3、邮箱的校验 4、URL的校验 5、IPv4的校验 6、16进制颜色的校验...

  • 常见正则表达式校验

    1、手机号码的校验 2、身份证的校验 3、邮箱的校验 4、URL的校验 5、IPv4的校验 6、16进制颜色的校验...

网友评论

      本文标题:el-input相关校验,包含数字校验,qq,邮箱,电话

      本文链接:https://www.haomeiwen.com/subject/bwwevdtx.html