首页 前端知识 js验证16进制和十进制

js验证16进制和十进制

2024-02-01 12:02:15 前端知识 前端哥 521 973 我要收藏
/* 判断是否为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的元素。

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1022.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!