el-input 限制输入框只能输入数字和小数

String佳佳

已于 2022-04-24 15:14:51 修改

阅读量4.1w

点赞数 27

分类专栏： vue+elementui相关知识点和难点文章标签： javascript 开发语言 ecmascript

于 2019-10-08 15:53:27 首次发布

本文链接：https://blog.csdn.net/weixin_44171757/article/details/102391297

版权

vue+elementui相关知识点和难点专栏收录该内容

35 篇文章

订阅专栏

1、纯输入框

方法一：

oninput =“value=value.replace(/[^\d]/g,‘’)” //只能输入数字

oninput =“value=value.replace(/[^0-9.]/g,‘’)” //只能输入数字和小数

<el-input v-model="sjje" oninput ="value=value.replace(/[^0-9.]/g,'')" class="money sjje">
	<span slot="suffix">/ 元 </span>
</el-input>

方法二：

	<el-input v-model="sjje" class="money sjje" @input="inputChange">
      <span slot="suffix">/ 元 </span>
    </el-input>

	inputChange(val) {
      this.sjje = this.sjje.replace(/[^0-9.]/g, '')
    }

在这里插入图片描述

2、form表单输入框

<el-form ref="userform" rules="rules" :model="form" label-width="110px">
	<el-row>
		<el-form-item label="年龄：" prop="age">
            <el-input v-model="form.age"></el-input>
        </el-form-item>
	</el-row>
</el-form>

rules:{
  age:[
    { required: true, message: '年龄不能为空', trigger: 'blur'},
    {pattern: /^[0-9]*$/, message: '年龄需为数字', trigger: 'blur'}
  ]
},