我正在制作一個相框計算器。我在制作輸入欄位時遇到問題required。只有當我使用本機表單提交時,該required屬性才會起作用,本質上是讓<form>元素驅動表單提交。相反,我選擇使用這個:
#height {
text-align: left;
margin-top: 250px;
margin-left: 4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<sides>
<section>
<form id="frm1" action="/index.html" method="post">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wf" id="wf">
<select name="wff" id="wff">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="frameHeight">Frame Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hf" id="hf">
<select name="hff" id="hff">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureWidth">Picture Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wp"
id="wp">
<select name="wpf" id="wpf">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureHeight">Picture Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hp"
id="hp">
<select name="hpf" id="hpf">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="o" id="o">
<select name="of" id="of">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<br>
<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script>
function calc()
{
var wf = eval(document.getElementById('wf').value)
var wff = eval(document.getElementById('wff').value)
var hf = eval(document.getElementById('hf').value)
var hff = eval(document.getElementById('hff').value)
var wp = eval(document.getElementById('wp').value)
var wpf = eval(document.getElementById('wpf').value)
var hp = eval(document.getElementById('hp').value)
var hpf = eval(document.getElementById('hpf').value)
var o = eval(document.getElementById('o').value)
var of = eval(document.getElementById('of').value)
if (!wf || !hf || !wp || !hp || !o) {
alert('All fields are required!')
return
}
var width = (1 / 2) * ((hf hff) - (hp hpf) (o of ));
var height = (1 / 2) * ((wf wff) - (wp wpf) (o of ));
document.getElementById('width').innerHTML = new Fraction(width).toString();
document.getElementById('height').innerHTML = new Fraction(height).toString();
document.getElementById('rectangle').scrollIntoView({
behavior: 'smooth'
})
}
</script>
</sides>
<sides>
<center>
<div style="width:400px;height:50px;;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>
</sides>
</body>
</html>
正如您在上面的代碼片段中看到的那樣,當您將欄位留空時,它會按您應該的方式拋出錯誤訊息。但是,當用戶在0欄位中鍵入 a 時,它會產生與它不應該的相同的錯誤。
有問題的代碼是:
if (!wf || !hf || !wp || !hp || !o) {
alert('All fields are required!')
return
}
我的required欄位僅包含輸入欄位,不適用于選擇下拉選單。
有人可以提供一些指導,說明在使用上述代碼時只有空白欄位會收到我的錯誤訊息require嗎?
uj5u.com熱心網友回復:
通過使用約束驗證 API查詢驗證狀態,即使不使用本機表單提交,您也可以使用驗證。
不要eval用于將字串轉換為數字,尤其是用戶輸入。使用parseInt,parseFloat或酉運算子 。
此外,<input type="number">元素具有valueAsNumber您可以使用而不是value. 所有這些都將回傳,如果值不是數字或不能轉換為數字,則NaN可以檢查。isNaN()
uj5u.com熱心網友回復:
改變你的邏輯
從 :
if (!wf || !hf || !wp || !hp || !o) {
alert('All fields are required!')
return
}
到 :
if (!(wf || hf || wp || hp || o)) {
alert('All fields are required!')
return
}
#height {
text-align: left;
margin-top: 250px;
margin-left: 4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>
<sides>
<section>
<form id="frm1" action="/index.html" method="post">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wf" id="wf">
<select name="wff" id="wff">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="frameHeight">Frame Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hf" id="hf">
<select name="hff" id="hff">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureWidth">Picture Width:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="wp"
id="wp">
<select name="wpf" id="wpf">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureHeight">Picture Height:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="hp"
id="hp">
<select name="hpf" id="hpf">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="o" id="o">
<select name="of" id="of">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<br>
<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script src="https://unpkg.com/[email protected]/index.js"></script>
<script>
function calc()
{
var wf = eval(document.getElementById('wf').value)
var wff = eval(document.getElementById('wff').value)
var hf = eval(document.getElementById('hf').value)
var hff = eval(document.getElementById('hff').value)
var wp = eval(document.getElementById('wp').value)
var wpf = eval(document.getElementById('wpf').value)
var hp = eval(document.getElementById('hp').value)
var hpf = eval(document.getElementById('hpf').value)
var o = eval(document.getElementById('o').value)
var of = eval(document.getElementById('of').value)
if (!(wf || hf || wp || hp || o)) {
alert('All fields are required!')
return
}
var width = (1 / 2) * ((hf hff) - (hp hpf) (o of ));
var height = (1 / 2) * ((wf wff) - (wp wpf) (o of ));
document.getElementById('width').innerHTML = new Fraction(width).toString();
document.getElementById('height').innerHTML = new Fraction(height).toString();
document.getElementById('rectangle').scrollIntoView({
behavior: 'smooth'
})
}
</script>
</sides>
<sides>
<center>
<div style="width:400px;height:50px;;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</center>
</sides>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/435026.html
標籤:javascript html css
