js验证16进制和十进制

最新推荐文章于 2024-10-16 10:28:15 发布

原创最新推荐文章于 2024-10-16 10:28:15 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #正则表达式

文章介绍了两个JavaScript函数，checkhex()和checkdec()，用于在用户键盘按键松开时通过正则表达式实时验证输入是否为有效的16进制或十进制数值。函数利用input元素的onkeyup事件和value属性获取输入值，并通过父元素找到相关错误提示标签显示验证结果。

/* 判断是否为16进制 */
function checkhex(hex) {
    var hexvalue = hex.value;
    console.log(hexvalue);
    var reghex = /^[A-Fa-f0-9]{1,4}$/;
    var label = hex.parentElement.getElementsByClassName("error")[0];
    if (reghex.test(hexvalue)) {
        console.log(true);
        label.textContent = "✔"
        return true;
    } else {
        console.log(false);
        label.textContent = "请输入正确的16进制"
        return false;
    }

}

/* 判断是否为十进制 */
function checkdec(dec) {
    var decvalue = dec.value;
    console.log(decvalue);
    var regdec = /^-{0,1}\d*\.{0,1}\d+$/;
    var label = dec.parentElement.getElementsByClassName("error")[0];
    if (regdec.test(decvalue)) {
        console.log(true);
        label.textContent = "✔"
        return true;
    } else {
        console.log(false);
        label.textContent = "请输入正确的十进制"
        return false;
    }

}

<div>
<input type="text" onkeyup="checkhex(this)">
<i class="error" style="color: red;"></i>
</div>

<div>
<input type="text" onkeyup="checkhex(this)">
<i class="error" style="color: red;"></i>
</div>

我是使用正则表达式进行判断的，onkeyup是在键盘按键松开时就执行函数。贴上效果图

其中

<input type="text" onkeyup="checkhex(this)">

checkhex(this)函数则是表示当前元素为参数，即input元素，把当前参数传到js函数中，而

 var hexvalue = hex.value;

中的hex.value则是在input中输入的文本值，执行

console.log(hex)
    var hexvalue = hex.value;

后

而

var label = hex.parentElement.getElementsByClassName("error")[0];

中，parentElement表示父元素，该句代码含义为把hex，即input元素的父元素即div下获取第0个class名称为error的元素。

新手第一次写，如有理解错误，可以在评论区多多讨论😄