输入号码旁边的错误消息不是文字

我需要一些帮助：我需要验证用户输入的是fuelcost输入中的数字而不是文本。还要在输入栏旁边以小的红色斜体字体显示错误消息，并将焦点更改为该栏位（修复后清除错误消息）我不知道如何从这里继续：输入号码旁边的错误消息不是文字

<body> 
<select id="destList"> 
    <option id="28">Falmouth to Nantucket</option> 
    <option id="11">Falmouth to Edgartown</option> 
    <option id="7.6">Falmouth to Oak bluffs</option> 
    <option id="38">Falmouth to Newport</option> 
</select> 
<p/> 
<select id="speedList"> 
    <option id="18" value="14">14 kt</option> 
    <option id="24" value="18">18 kt</option> 
    <option id="30" value="20">20 kt</option> 
    <option id="37" value="22">22 kt</option> 
</select> 
<p/> 
<input type="text" id="fuelCost" value="4.25" /> 
<p/> 
<button onClick="calcCharterCost()">Calculate</button> 
</body> 

<script> 
function calcCharterCost() 
{ 
    var destList = document.getElementById("destList"); 
    var distance = destList.options[destList.selectedIndex].id; 


    var speedList = document.getElementById("speedList"); 
    var gph = speedList.options[speedList.selectedIndex].id; 
    var speed = speedList.value; 

    var fuelCost = document.getElementById("fuelCost").value; 
    if (fuelCost == "") 

    var time; 
    time = (distance/speed); 

    var cost; 
    cost = time * gph * fuelCost; 
    alert("cost = " + cost.toFixed(2)); 
} 
</script>

帮助

来源

2016-08-16 VonTilly

我删除了您的“java”问题标记，因为您的问题似乎与此语言无关。如果我错过了某些内容并做错了，请告诉我。 –

_“我需要验证用户输入的是一个数字而不是输入的文本”_'.'字符不是数字 – guest271314

isFinite(variable)

这方便的小功能检查，如果一个变量是一个数字（小数或整数）。你可以检查在if语句，如果isFinite(fuelCost)，计算成本，否则。，给用户一些他们没有的错误信息不输入数字。

来源

2016-08-16 00:59:37

您可以将您的元素封装在表单中，并将输入字段的类型设置为“数字”。浏览器会为你处理错误信息。

<input type="number" id="fuelCost" value="4.25"/>

请参阅此琴：https://jsfiddle.net/ca3apsho/

来源

2016-08-16 01:05:58 derp

您可以在<input>元素使用pattern属性与RegExp\d+\.\d+|\d+匹配随后由数字字符.后跟数字或数字字符;毗邻<input>元素<label>元素，css:invalid，:after，content

:invalid + [for="fuelCost"]:after { 
 
    content:"input requires number"; 
 
    color:red; 
 
}

<input type="text" id="fuelCost" value="4.25" pattern="\d+\.\d+|\d+"/> 
 
<label for="fuelCost"></label>

来源

2016-08-16 01:25:08 guest271314

我在这里做了很多的变化。首先，当你从DOM（id，value's等）拉动数字时，它们将是字符串。所以当你试图用数学来进行数学运算时，它就不会起作用。最好将这些值转换为您正在查找的类型。在这种情况下，它是数字。另一件事是选项和输入有价值属性。所以最好使用它们。

我改变了HTML看起来像这样。

<body> 
<select id="destList"> 
    <option id="28" value="28">Falmouth to Nantucket</option> 
    <option id="11" value="11">Falmouth to Edgartown</option> 
    <option id="76" value="7.6">Falmouth to Oak bluffs</option> 
    <option id="38" value="38">Falmouth to Newport</option> 
</select> 
<p/> 
<select id="speedList"> 
    <option id="18" value="14">14 kt</option> 
    <option id="24" value="18">18 kt</option> 
    <option id="30" value="20">20 kt</option> 
    <option id="37" value="22">22 kt</option> 
</select> 
<p/> 
<input type="text" id="fuelCost" value="" /> 
<p/> 
<button onClick="calcCharterCost()">Calculate</button> 
</body>

和JS看起来像这样。

function calcCharterCost() 
{ 
    var time, 
     cost, 
     errorElem = document.createElement("span"), //create a span for the error message. 
     destList = document.getElementById("destList"), //grab the destList ID DOM element. 
     speedList = document.getElementById("speedList"), //grab the speedList ID DOM element. 
     fuelCost = document.getElementById("fuelCost"), //grab the fuelCost ID DOM element. 
     distance = destList.options[destList.selectedIndex].value, //get destList option value. 
     gph = speedList.options[speedList.selectedIndex].value, //get speedList option value. 
     fuelVal = fuelCost.value, //get the input value. 
     distanceNum = Number(distance), // convert the distance variable to a number. 
     fuelNum = Number(fuelVal), // convert the fuelVal variable to a number. 
     speed = Number(gph), // convert the gph variable to a number. 
     parentElem = fuelCost.parentNode; // get the parent node of the input element. 

     errorElem.textContent = "Fuel value needs a number value."; // create an error messaeg. 


    time = (distanceNum/speed); 

    cost = time * speed * fuelNum; 

    //ternary operation checks to see if the input is blank and a number type. if it is not append error element. 
    fuelVal === "" || typeof fuelVal !== "number" ? parentElem.appendChild(errorElem) : alert("cost = " + cost.toFixed(2)); 
}

来源

2016-08-16 03:07:21

输入号码旁边的错误消息不是文字

回答

相关问题