js验证16进制和十进制

/* 判断是否为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的元素。

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