首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >ElementUI input只允许输入数字和两位小数

ElementUI input只允许输入数字和两位小数

作者头像
py3study
发布2021-02-22 10:51:49
发布2021-02-22 10:51:49
7K0
举报
文章被收录于专栏:python3python3

一、概述

ElementUI 官方给的demo,里面有验证数字的,但是没有小数点的校验。

二、代码实现

页面效果

from表单

代码语言:javascript
复制
<el-form-item label="价格" prop="price">
  <el-input v-model="ruleForm.price"  oninput="value=value.replace(/[^0-9.]/g,'')"  placeholder="请输入价格" />
</el-form-item>

校验规则

代码语言:javascript
复制
data() {
    const validateMoney = (rule,value,callback) =>{
        if(!value){
            callback(new Error('价格不能为空'))
         }else if(value.indexOf(".") != -1 && value.split('.').length > 2){
            callback(new Error('请输入正确格式的金额')) //防止输入多个小数点
         }else if(value.indexOf(".") != -1 && value.split('.')[1].length > 2){
           callback(new Error('请输入正确的小数位数')) //小数点后两位
        }else{
          callback();
        }
    };
    return{
     rules: {
        price:[
          { type: 'string',required: true,trigger: 'blur', validator:validateMoney},
        ]
      },
    }
  }

本文参考链接: https://www.freesion.com/article/9003774056/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/02/04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、概述
  • 二、代码实现
    • 页面效果
    • from表单
    • 校验规则
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档