为了账号安全,请及时绑定邮箱和手机立即绑定

请问如何不让type=number的Input,不可输入加号减号和多个小数点?

请问如何不让type=number的Input,不可输入加号减号和多个小数点?

慕容3067478 2018-11-15 14:14:47
先谢谢各位了,我是写了一个type = number的Input,鉴于业务需求,这个Input中只能输入数字,加减号不可输入。本来想判断input中的value值来手动删掉里面的加号减号及多余的点,可是又发现一旦输入的值不合法,Input的value已经被转化为空字符串 ‘’。这样我就无法取到input中的值了。想了许久不知道解决方法,求各位大神帮忙了,谢谢~对了,我是用vue写的页面~~~
查看完整描述

1 回答

?
德玛西亚99

TA贡献1770条经验 获得超3个赞

用正则匹配 '^[-]?[0-9]*\.?[0-9]+(eE?[0-9]+)?$'

<input type="text" />

可以用这种方式,监听input值的变化,发现验证不过就提示。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Welcome</title>

</head>

<body>

<form>

    <input id="inputNumber" type="text" name="test" onblur="checkNumber()">

</form>


<script type="text/javascript">

 function checkNumber(){

    var inputNumber = document.getElementById('inputNumber').value;

    if(!/^[-]?[0-9]*\.?[0-9]+(eE?[0-9]+)?$/.test(inputNumber)){

        alert('Please input a valid number!');

        return false;

    }

}

</script>

</body>

</html>


查看完整回答
反对 回复 2018-12-10
  • 1 回答
  • 0 关注
  • 2145 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号