您的位置:

JavaScript 只能输入数字

一、什么是JavaScript只能输入数字

JavaScript 只能输入数字是指在输入框中,JavaScript 能够限制用户只能输入数字类型的数据,同时还能进行一些其他的数据验证。

在开发中,限制输入格式是十分重要的,特别是在需要输入敏感的信息时,如身份证号码、电话号码、银行卡号等,JavaScript 可以帮助我们定制输入格式、处理特殊字符等

二、如何实现JavaScript只能输入数字

实现JavaScript 只能输入数字的方法有很多,以下分别介绍。

1.使用正则表达式


    function checkNum(e) {
        var num = /^[0-9]*$/;
        if(!num.test(e.value)){
            alert('只能输入数字');
            e.focus();
            return false;
        }
    }
    输入框:<input type="text" onkeyup="checkNum(this)" />

当用户输入非数字字符时,正则表达式判断不通过,触发提示,并调用 focus() 方法将鼠标聚焦到输入框中

2.使用 HTML5 的 input 标签属性


    输入框:<input type="number" min="0" />

该方法使用 HTML5 中的 input 标签的 type 属性为 number,同时还可设置 min 和 max 属性限制输入数据的范围。

3.使用 isNaN() 函数


    function checkNum(num) {
        if(isNaN(num)){
            alert('只能输入数字');
            return false;
        }
    }
    输入框:<input type="text" onkeyup="checkNum(this.value)" />

当用户输入非数字字符时,isNan() 函数判断不通过,触发提示

三、其他数据验证

除了只能输入数字,JavaScript 还可以进行其他输入的数据验证,如邮箱、密码等。

1.电子邮箱验证


    function checkEmail(email) {
        var emailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
        if(!emailReg.test(email)){
            alert('请输入有效的邮箱地址');
            return false;
        }
    }
    输入框:<input type="email" onkeyup="checkEmail(this.value)" />

2.密码格式验证

密码格式验证可包含数字、字母、特殊字符的组合,以下为一个简单的示例。


    function checkPassword(password) {
        var passwordReg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
        if(!passwordReg.test(password)) {
            alert('密码格式不正确');
            return false;
        }
    }
    输入框:<input type="password" onkeyup="checkPassword(this.value)" />

四、总结

JavaScript 只能输入数字是我们开发中常用的一种数据验证技巧,能有效限制用户输入不符合规范的数据,并保证输入的数据有效性。

值得注意的是,在进行数据验证时,我们应该兼顾用户体验。如果数据验证过于严格,容易让用户产生误解,降低用户体验感。