/* 判断是否为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的元素。
新手第一次写,如有理解错误,可以在评论区多多讨论😄