將輸入字段限制為僅數字
[英]limiting input field to numbers only
問題描述
我正在為學校編寫程序，他希望我們執行以下操作：如果在“年齡”字段中輸入了任何非數字條目，則將出現帶有兩行消息的警告框：
您輸入的年齡只能包含數字。 請重新輸入。
然后：如果輸入的年齡小於18歲，則在包含消息的按鈕下方應顯示一個附加段落
然后：對於18歲及以上的年齡，腳本必須根據申請人的大學學歷計算並顯示薪水。 如果申請人持有學位，則通過將申請人的年齡乘以$ 1000.00來確定薪水。 沒有學位，乘數將僅為$ 600.00。 按下“確定薪水”按鈕時，腳本將顯示包含計算出的薪水報價的額外段落元素，如以下示例圖中所示。
我已經嘗試了所有可能想到的方法，以確保沒有在年齡字段中輸入任何字母字符，但是我似乎無法使其正常工作。 請幫忙！
<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset= utf-8' />
<title>Form Based JavaScript</title>
<style type = "text/css">
h2 {text-align:left;}
body {background-color:lightblue;}
.input {font-family:"Courier New", Courier, monospace;}
</style>
<script type = "text/javascript">
<!--
function salary() `enter code here`
{
var age;
var degree;
if (age != [0-99]
{
document.writeln( "The age that you entered must contain only numerals. <br /> Please re-enter it.");
else if (age < 18)
document.writeln( " Sorry - you must be 18 or older for this job. <br /> Please reapply in [18 - age] years." );
else if (age >=18)
document.writeln( " You qualify! Salary offer [degree * ] dollars. See our staff for an application" );
}
}
// -->
</script>
<!-- project6.htm Tatiana Saavedra 04/17/2013 -->
</head>
<body>
<h2> Applicant Screening Page </h2>
<hr />
<form id = "myForm" action = "">
<p>Email:<input type = "email" id = "email"></p>
<p>Age:<input type = "number" maxlength="3" size="3" id = "age"></p>
<p><label>Check the box if you hold a college degree: <input type = "checkbox" id = "degree"></label></p>
<br />
<form action="">
<input type="button" value="Determine Salary" onclick="salary()"/>
</form>
</body>
</html>
3 個解決方案
解決方案1
0 2013-04-23 23:32:11
您在打開和關閉方括號時遇到一些錯誤，請在執行任何操作之前檢查此錯誤，您的JavaScript尚未加載，因此不執行任何操作，正如已經告訴您的那樣，您在聲明變量但未為其分配值。 我也建議您將javascript放在頁面底部
解決方案2
0 2013-04-23 23:39:34
嘗試這個 ：
function isInteger(n)
{
if (n.indexOf('.') != -1)
{
return false;//do not accept decimal numbers
}
return !isNaN(parseInt(n)) && isFinite(n);
}
parseInt將值解析為整數，如果值包含字母字符，則返回NaN
isNaN檢查結果是否為NaN
isFinite處理n以數字開頭但包含字符的情況。
您不只使用isFinite的原因是，如果嘗試使用isFinite(' ')它將返回true。
還可以使用parseInt(age)值進行比較，因為比較數字更好
解決方案3
0 2013-04-24 01:23:13
<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
那是一個非常老的DOCTYPE，不應該使用（它是十多年來幫助從HTML到XHTML的過渡，但從未發生過）。 只需使用：
<?DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset= utf-8' />
看到？ 內容是HTML，用作HTML。 :-) [...]
如果這是XML，則只需將頁面空白。 HTML注釋定界符已經有20多年的歷史了，在符合HTML標准的瀏覽器中，腳本頭部的腳本元素從不需要它們。 不要使用它們。
function salary() `enter code here`
{
糟糕，您不能在其中輸入字符串文字。 將其放在功能主體中。 我喜歡將左括號與function關鍵字和名稱放在同一行。 我假設字符串根本不存在：
function salary() {
var age;
var degree;
if (age != [0-99]
缺少右括號“）”。
{
document.writeln( "The age that you entered must contain only numerals. <br /> Please re-enter it.");
如果調用document.writeln的文檔finsihed加載后，它會先調用document.open ，這
清除文檔中的所有內容。 您可能想要做的是在文檔中添加一個元素，並將文本放入其中。 或將文本放在頁面中已有的元素內。
else if (age < 18)
您應該在所有if塊周圍使用花括號，這樣會使代碼更易於閱讀。 有時，為非常簡單的塊和語句省略它們很方便，但此處不行。 小號
document.writeln( " Sorry - you must be 18 or older for this job. <br /> Please reapply in [18 - age] years." );
您似乎正在嘗試在字符串中進行算術運算，但是您不能這樣做。 因此，通過寫入元素來替換document.writeln ，並進行如下簡化：
"Please reapply in " + (18 - age) + " years."
。
else if (age >=18)
document.writeln( " You qualify! Salary offer [degree * ] dollars. See our staff for an application" );
}
}
同樣在這里。
</script>
</head>
<body>
<h2> Applicant Screening Page </h2>
<hr>
<form id = "myForm" action = "">
<p>Email:<input type = "email" id = "email"></p>
<p>Age:<input type = "number" maxlength="3" size="3" id = "age"></p>
您可以在輸入年齡之前輸入一個空的跨度以放入消息。
<p><label>Check the box if you hold a college degree: <input type = "checkbox" id = "degree"></label></p>
表單控件需要一個名稱才能成功，它們通常不需要ID。
<p>Email:<input type="email" name="email"></p>
<p>Age:<input type ="number" maxlength="3" size="3" name="age"></p>
<p><label>Check the box if you hold a college degree: <input type="checkbox" name="degree"></label></p>
<br>
<form action="">
您不能將表單放入表單中，只需刪除上面的標簽（它沒有結束標簽）。
<input type="button" value="Determine Salary" onclick="salary()">
您需要一個提交按鈕來使表單提交。
</form>
</body>
</html>
因此，請嘗試更新代碼，如果需要更多幫助，請回來。
限制輸入字段只接受帶范圍的數字
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.