开发系统时，常会需要将使用者在多个 TextBox 中输入的数字，做加总的计算，此时必须验证使用者只能输入数字。如下图 1 所示，有时可能还需要用 JavaScript 做数字的实时加总计算，并将计算结果显示在 Label 中。


图 1　页面下方的 Label，有三个 TextBox 输入数字的实时加总计算结果

在图 1 的三个 TextBox 中，若要验证输入是否为数字，只要用 ASP.NET 的验证控件，或 AJAX 的MaskedEditExtender 即可办到。但用验证控件的话，当使用者输入的不是数字时，并无法将鼠标或键盘的 focus，强制停留在输入错误的 TextBox 中 (否则非数字内容，会造成实时加总的计算错误)；若用 AJAX 的话，则会造成实时计算加总的 JavaScript 失效。

本帖提供的 ASP.NET 示例，为「验证只能输入数字」、「实时数字加总计算」，都用 JavaScript 处理。若使用者输入的为中文字、特殊符号，除了像验证控件一样，会在右侧显示红色的错误字样，本示例还会强制将鼠标或键盘的 focus，停留在 TextBox 中，直到使用者正确地输入数字为止。

本帖的示例代码下载点：
http://files.cnblogs.com/WizardWu/080831.zip

(执行本示例，不用数据库，但需要 IIS 或 VS 2005)

重点代码如下：


protected void Page_Load(object sender, EventArgs e)
{
    // 替三個 TextBox 加上 JavaScript 函數呼叫的功能
    TextBox1.Attributes["onBlur"] = "calc();";
    TextBox2.Attributes["onBlur"] = "calc();";
    TextBox3.Attributes["onBlur"] = "calc();";
}

<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>

转自：http://blog.csdn.net/wizardwu/article/details/4680890

转载于:https://www.cnblogs.com/tangge/archive/2012/05/20/2510841.html

用 JavaScript 验证只能输入数字，并做数字加总相关推荐

  1. [转]JavaScript：只能输入数字(IE、FF)

    本文转自:http://www.cnblogs.com/ly5201314/archive/2009/03/04/1402993.html JavaScript:只能输入数字(IE.FF) 为了解决只 ...

  2. php 正则 中文英文,php 验证只能输入汉字、英语、数字的正则表达式

    收藏了正则表达式.可以验证只能输入数字.汉字.英语.分开验证了也可以整合一起验证.但是我是拆分开好了.比较好使.可以单独的验证.经过本人测试可以使用的哦!下面就是php 验证只能输入汉字.英语.数字的 ...

  3. javascript/JS限制用户名只能输入 汉字字母和数字下划线

    验证用户名的一个例子: html: js: function checkUser() { var username = $("#username").val(); if (!use ...

  4. 验证只能输入数字——正则表达式

    验证只能输入数字: 正则表达式: ".456.fsf".replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,''). ...

  5. html用户名只包括字母下划线,javascript/JS限制用户名只能输入 汉字字母和数字下划线...

    验证用户名的一个例子: html: js: function checkUser() { var username = $("#username").val(); if (!use ...

  6. php能写入英文不能写入中文,ios,uitextfield_IOS textField怎样设置只能输入英文字母或者数字，不能输入汉字，ios,uitextfield - phpStudy...

    IOS textField怎样设置只能输入英文字母或者数字,不能输入汉字 RT,要弄个输入车牌后5位字符的输入框,车牌后5位只能有数字和字母,我在网上找了很多方法,都有些问题,要么就全都能输入,要么就 ...

  7. Jquery表单验证 只能输入数字,

    <script type="text/javascript"> $(document).ready(function () {///验证文本框只能输入数字 $(&quo ...

  8. js 验证用户输入的是否为数字、检查只能为数字

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 方法一 如果判断输入的是否是数字,如果不是数字弹出一个提示:简易代码如下: <body> ...

  9. input只能输入大于等于0的数字，包括整数和小数

    以JQ的输入方法为例 ​ $('input').on('input propertychang', function () {this.value = this.value.replace(/[^\d ...

最新文章

  1. Mysql内置优化工具show profiles
  2. iOS关于RunLoop和Timer
  3. html页面源码_整合SpringMVC之错误处理底层原理及源码分析
  4. Windows编程—获取Chrome浏览器的安装目录
  5. 未來用工新趨勢_浅谈2019年灵活用工五大新趋势
  6. javascript之字符串常用方法学习 charAt concat indexOf substring substr toUpperCase
  7. Sqlserver2008 数据库镜像会话的初始连接
  8. 加拿大11年级计算机课程代码,加拿大高中选课那些事儿
  9. 多元统计分析最短距离法_多元统计分析方法 -
  10. 线程池的几种构造方法及使用的策略
  11. 写论文同义替换的软件.v.1.2.3
  12. Ubuntu Linux全方位学习,哪一种Ubuntu官方版本适合你？
  13. SDN与OPENFLOW 简介
  14. SQLZOO 答案—完整版
  15. css overflow属性及使用方法
  16. Python的编译器
  17. windows 11 访问带SMB的文件服务器(小米路由器)
  18. 学日语、记单词是有规律的（转载）
  19. 令人抓狂的Linux桥接设定奇遇
  20. 【BigDecimal.compareTo 遇到的坑】

热门文章

  1. c语言logo,真好玩 C语言输出Yahoo动态logo
  2. python网络爬虫与信息提取北京理工大学_Python网络爬虫与信息提取（一）
  3. linux 线程退出 signal,Linux signal 那些事儿 （3）
  4. 用python打开视频_Python读取视频的两种方法（imageio和cv2）
  5. html5表单新增的输入类型,HTML5之表单新增类型介绍
  6. python装饰器传递参数_如何将额外的参数传递给Python装饰器？
  7. traybox错误怎么办_toolbox提示错误无法使用怎么办？
  8. 回老家还是继续北上广？
  9. 教你一秒分辨真假芯片！
  10. 程序员新动向！大龄困惑详解！