用 JavaScript 验证只能输入数字，并做数字加总
2008-08-31 01:24
399 查看
开发系统时，常会需要将使用者在多个 TextBox 中输入的数字，做加总的计算，此时必须验证使用者只能输入数字。如下图 1 所示，有时可能还需要用 JavaScript 做数字的实时加总计算，并将计算结果显示在 Label 中。
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>未命名頁面</title>
<script type="text/javascript">
function calc() {
var re = /^\d+$/; // 驗證只能輸入數字的 Regular Expression
intTotal = 0;
intTextBox1 = 0;
intTextBox2 = 0;
intTextBox3 = 0;
if (document.all.TextBox1.value != '')
{
obj = document.all.TextBox1;
if (obj.value!='' && !re.test(obj.value))
{
document.all.Label1.innerText = '本欄位只能輸入數字';
document.all.TextBox1.select();
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
// document.all.FormView1_btnInsertConfirm.disabled = true;
return false;
}
else
{
document.all.Label1.innerText = ''; // 若使用者改為只輸入數字，則清除 Label1 中的錯誤訊息
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
// document.all.FormView1_btnInsertConfirm.disabled = false;
intTextBox1 = eval(document.all.TextBox1.value);
}
}
else
{
document.all.Label1.innerText = ''; // 若使用者把 TextBox1 清空，則清除 Label1 中的錯誤訊息
}
if (document.all.TextBox2.value != '')
{
obj = document.all.TextBox2;
if (obj.value!='' && !re.test(obj.value))
{
document.all.Label2.innerText = '本欄位只能輸入數字';
document.all.TextBox2.select();
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
// document.all.FormView1_btnInsertConfirm.disabled = true;
return false;
}
else
{
document.all.Label2.innerText = ''; // 若使用者改為只輸入數字，則清除 Label2 中的錯誤訊息
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
// document.all.FormView1_btnInsertConfirm.disabled = false;
intTextBox2 = eval(document.all.TextBox2.value);
}
}
else
{
document.all.Label2.innerText = ''; // 若使用者把 TextBox2 清空，則清除 Label2 中的錯誤訊息
}
if (document.all.TextBox3.value != '')
{
obj = document.all.TextBox3;
if (obj.value!='' && !re.test(obj.value))
{
document.all.Label3.innerText = '本欄位只能輸入數字';
document.all.TextBox3.select();
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
// document.all.FormView1_btnInsertConfirm.disabled = true;
return false;
}
else
{
document.all.Label3.innerText = ''; // 若使用者改為只輸入數字，則清除 Label3 中的錯誤訊息
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
// document.all.FormView1_btnInsertConfirm.disabled = false;
intTextBox3 = eval(document.all.TextBox3.value);
}
}
else
{
document.all.Label3.innerText = ''; // 若使用者把 TextBox3 清空，則清除 Label3 中的錯誤訊息
}
intTotal = intTextBox1 + intTextBox2 + intTextBox3; // 加總後的數字
document.all.LabelTotal.innerText = intTotal; // 顯示三個 TextBox 加總後的數字
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Label ID="Label1" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Label ID="Label2" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br />
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><asp:Label ID="Label3" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br />
<br />
三個 TextBox 的數字加總為：
<asp:Label ID="LabelTotal" runat="server"></asp:Label><br />
</div>
</form>
</body>
</html>
Default.aspx
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>未命名頁面</title>
<script type="text/javascript">
function calc() {
var re = /^\d+$/; // 驗證只能輸入數字的 Regular Expression
intTotal = 0;
intTextBox1 = 0;
intTextBox2 = 0;
intTextBox3 = 0;
if (document.all.TextBox1.value != '')
{
obj = document.all.TextBox1;
if (obj.value!='' && !re.test(obj.value))
{
document.all.Label1.innerText = '本欄位只能輸入數字';
document.all.TextBox1.select();
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
// document.all.FormView1_btnInsertConfirm.disabled = true;
return false;
}
else
{
document.all.Label1.innerText = ''; // 若使用者改為只輸入數字，則清除 Label1 中的錯誤訊息
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
// document.all.FormView1_btnInsertConfirm.disabled = false;
intTextBox1 = eval(document.all.TextBox1.value);
}
}
else
{
document.all.Label1.innerText = ''; // 若使用者把 TextBox1 清空，則清除 Label1 中的錯誤訊息
}
if (document.all.TextBox2.value != '')
{
obj = document.all.TextBox2;
if (obj.value!='' && !re.test(obj.value))
{
document.all.Label2.innerText = '本欄位只能輸入數字';
document.all.TextBox2.select();
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
// document.all.FormView1_btnInsertConfirm.disabled = true;
return false;
}
else
{
document.all.Label2.innerText = ''; // 若使用者改為只輸入數字，則清除 Label2 中的錯誤訊息
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
// document.all.FormView1_btnInsertConfirm.disabled = false;
intTextBox2 = eval(document.all.TextBox2.value);
}
}
else
{
document.all.Label2.innerText = ''; // 若使用者把 TextBox2 清空，則清除 Label2 中的錯誤訊息
}
if (document.all.TextBox3.value != '')
{
obj = document.all.TextBox3;
if (obj.value!='' && !re.test(obj.value))
{
document.all.Label3.innerText = '本欄位只能輸入數字';
document.all.TextBox3.select();
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這將其設為唯讀
// document.all.FormView1_btnInsertConfirm.disabled = true;
return false;
}
else
{
document.all.Label3.innerText = ''; // 若使用者改為只輸入數字，則清除 Label3 中的錯誤訊息
// 若頁面中，有寫入資料庫功能的「確定」按鈕，可在這解除唯讀
// document.all.FormView1_btnInsertConfirm.disabled = false;
intTextBox3 = eval(document.all.TextBox3.value);
}
}
else
{
document.all.Label3.innerText = ''; // 若使用者把 TextBox3 清空，則清除 Label3 中的錯誤訊息
}
intTotal = intTextBox1 + intTextBox2 + intTextBox3; // 加總後的數字
document.all.LabelTotal.innerText = intTotal; // 顯示三個 TextBox 加總後的數字
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Label ID="Label1" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Label ID="Label2" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br />
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><asp:Label ID="Label3" runat="server" ForeColor="Red" Font-Size="Small"></asp:Label><br />
<br />
三個 TextBox 的數字加總為：
<asp:Label ID="LabelTotal" runat="server"></asp:Label><br />
</div>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Javascript 验证控件只能输入数字
- javascript验证只能输入数字和一个小数点示例
- 用 JavaScript 验证只能输入数字，并做数字加总
- 用 JavaScript 验证只能输入数字，并做数字加总
- javascript 验证 只能输入数字和一个小数点
- Javascript验证和限制文本框只能输入数字或者小数
- javascript验证只能输入数字和一个小数点示例
- angularjs中的验证input输入框只能输入数字和小数点
- js验证如何限制文本框只能输入数字
- js验证文本框只能输入数字
- JavaScript 控制只能输入数字
- javascript限制输入的只能是数字
- javascript限制只能输入数字
- 客户端JavaScript实现监视用户键盘输入(只能输入数字,最大输入8个)
- js,ajax验证编号是否存在，input只能输入数字,form表单验证
- JavaScript验证用户输入的是字符或数字
- JavaScript控制输入框中只能输入中文、数字和英文
- 验证文本框只能输入数字
- Javascript控制文本框只能输入数字
- js验证只能输入汉字 只能输入数字 只能输入英文和数字 控制输入框只能输入...