如何验证和限制 javascript 中用于数字数据的 asp.net 文本框控件的长度？答案

【问题标题】：how to validate as well as restrict length of asp.net text box control in javascript for numeric data?如何验证和限制 javascript 中用于数字数据的 asp.net 文本框控件的长度？
【发布时间】：2011-12-31 00:53:57
【问题描述】：

我想通过仅使用 javascript 输入数字来验证 asp.net 文本框控件。数据的最大长度应为 3 位。为此，我使用了以下脚本 -

function isNumberKey(evt, obj) {

       var charCode = (evt.which) ? evt.which : event.keyCode
       var txt = obj.value.length;
       if (charCode > 31 && (charCode < 48 || charCode > 57))
           return false;
       else {
           if (txt < 3) {
               return true;
           }
           else {
               return false;
           }
       }
   }

和html代码如下--

<asp:TextBox ID="txtNoCall" runat="server" onkeypress="javascript:return isNumberKey(event,this);"></asp:TextBox>

它正在验证数字输入。并将长度限制为 3 位数。但问题是，当我按下退格键时，在 3 位数字之后，它就不起作用了。

如何解决？

谢谢。

【问题讨论】：

您是否有理由不使用内置的 asp.net 验证器并让它们生成您的客户端代码
@Daniel Powell：我不想生成任何将由 asp.net 验证器显示的消息。而且它也占用了我的网页空间。
您可以将错误消息留空，不会向用户显示任何内容
给用户一些视觉反馈可能是个好主意，因为他们输入了无效的内容
@Daniel Powell：当我使用上面的 javascript 时。然后我严格验证数据。不需要向用户显示任何与验证相关的错误消息，这可能会消耗您的时间。

标签： javascript asp.net html

【解决方案1】：

使用内置的 asp.net 验证器会容易得多，并为您提供服务器端和客户端验证

 <asp:RegularExpressionValidator id="RegularExpressionValidator1" 
                     ControlToValidate="txtNoCall"
                     ValidationExpression="\d{3}"
                     Display="Static"
                     ErrorMessage="Only 3 digits allowed"
                     EnableClientScript="True" 
                     runat="server"/>

请注意，我没有运行它，但我感觉 enableclientscript 在正则表达式验证器上不起作用，但 msdn 文档似乎没有提到任何关于它的内容，所以也许我错了。

【讨论】：

【解决方案2】：

你可以这样做

if ((txt == 3) && (charCode == 8)) {
                obj.value = obj.value.toString().substring(0, txt-1);
            }

这是完整的代码。

function isNumberKey(evt, obj) {
            var LIMIT = 3;           
            var charCode = (evt.which) ? evt.which : event.keyCode           
            var txt = obj.value.length;
            if ((txt == LIMIT) && (charCode == 8)) {
                obj.value = obj.value.toString().substring(0, txt-1);
            }
            if (charCode > 31 && (charCode < 48 || charCode > 57))
                return false;
            else {
                if (txt < LIMIT) {
                    return true;
                }
                else {
                    return false;
                }
            }  
        }

【讨论】：

【解决方案3】：

按照documentation设置TextBox.MaxLength。

如果您需要多行，请查看Specifying maxlength for multiline textbox。

如果您尝试自己构建它，请确保在您的测试场景中包含 Ctrl-V 和 Shift-Ins（大多数解决方案不能很好地处理这些问题）。

除此之外，您还应该构建服务器端以在那里进行验证。完全在客户端解决问题是不可能的（因为用户总是可以手工制作自己的 POST，或者禁用 javascript）。

【讨论】：