用 JavaScript 验证只能输入数字，并做数字加总
原帖：http://www.cnblogs.com/WizardWu/archive/2008/08.html
在图 1 的三个 TextBox 中，若要验证输入是否为数字，只要用 ASP.NET 的验证控件，或 AJAX 的 MaskedEditExtender 即可办到。
但用验证控件的话，当使用者输入的不是数字时，并无法将鼠标或键盘的 focus，强制停留在输入错误的 TextBox 中 (否则非数字内容，会造成实时加总的计算错误)；若用 AJAX 的话，则会造成实时计算加总的 JavaScript 失效。
本帖提供的 ASP.NET 示例，为「验证只能输入数字」、「实时数字加总计算」，都用 JavaScript 处理。若使用者输入的为中文字、特殊符号，除了像验证控件一样，会在右侧显示红色的错误字样，本示例还会强制将鼠标或键盘的 focus，停留在 TextBox 中，直到使用者正确地输入数字为止。
前台：
后台：
Codeusing System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// 替三個 TextBox 加上 JavaScript 函數呼叫的功能
TextBox1.Attributes["onBlur"] = "calc();";
TextBox2.Attributes["onBlur"] = "calc();";
TextBox3.Attributes["onBlur"] = "calc();";
}
}
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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" >
<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>
