常见验证场景的微型 JavaScript 框架
4.88/5 (14投票s)
本文介绍了一些可重复使用的 JavaScript 函数，这些函数可用于创建接受特定类型数据的输入字段。它还提供了用于验证数据的函数。
介绍
本文介绍了一些可重复使用的JavaScript函数，这些函数可用于创建接受特定类型数据的输入字段。它还提供了用于根据输入字段是否必填以及/或是否需要与正则表达式进行匹配来验证数据的函数。
背景
在许多场景下，我们希望限制用户输入某些特定类型的数据。例如，我有一个文本框用于接收用户姓名，那么该文本框不应该接受数字字符。同样，如果我有一个应该只接受数字输入的文本框，为什么允许用户输入字母呢？在许多场景下，我们可能只希望接受某些特定字符。上述所有场景并非严格意义上的验证，但拥有这类输入字段无疑会使其他客户端验证任务变得容易。
第二个方面是在提交前验证输入字段。jQuery validation 提供了一种非常简洁的处理此类验证的方法，但有时这似乎有些“杀鸡用牛刀”。如果有一个简单的机制来检查必填字段并与正则表达式进行验证，则可以处理很多验证。
我这里展示的是一个我使用已久的微型 JavaScript 文件。该文件包含一些函数，可以轻松地实现上述所有验证功能。对大多数人来说，这可能显得有点基础，但这个小框架可能会非常有用。
重要提示：客户端验证是确保数据有效性的第一道检查。它对大多数普通用户都会有效。具有恶意意图的更高级用户仍然可以绕过 JavaScript 代码。因此，在服务器端也保留相同的验证集以确保无效数据无法通过，始终是个好主意。
Using the Code
在查看代码之前，让我们先看一下我们将要处理的各种场景。
- 能够创建一个仅接受字母的输入字段。我们应该能够指定是否允许空格。
- 能够创建一个仅接受数字的输入字段。我们应该能够指定是否允许小数点。
- 能够创建一个接受字母和数字的输入字段。我们应该能够指定是否允许空格和小数点。
- 能够创建一个接受日期特定字符的输入字段。我们应该能够指定我们将使用的分隔符。
- 能够创建一个接受正则表达式中存在的字符的输入字段。
- 在回发前验证一个必填输入字段。
- 在回发前将输入字段与正则表达式进行验证。
让我们逐一详细看看。我将首先提供 JavaScript 函数，然后说明如何使用该函数。如果某个函数需要特别注意，我也会提及。
接受正则表达式中存在的字符
//Function to create textbox based on regular expressions
function AcceptRegExOnly(event, regex)
{
var keyCode = event.which ? event.which : event.keyCode;
var keyPressed = String.fromCharCode(keyCode);
return regex.test(keyPressed);
};
如何在 aspx 标记中使用此函数
<asp:TextBox ID="TextBox7" runat="server" onkeypress="return AcceptRegExOnly(event, /^[a-zA-Z@]$/);">
</asp:TextBox>
仅接受字母
有两个函数可以实现此目的。第一个函数使用keycode 来实现。第二个函数使用正则表达式来实现。这两个函数都会完成相同的任务，但如果由于某种原因，keycode 没有给出正确的结果，可以使用基于正则表达式的实现。请注意，两个实现都接受一个Boolean 参数来指定是否允许空格。
//Function to create alphabetic text box only - using keycodes
function AcceptAlphabetsOnly(event, allowSpaces)
{
var keyCode = event.which ? event.which : event.keyCode;
if ( (keyCode >= 97 && keyCode <= 122) || //lets allow for the small alphabets
(keyCode >= 65 && keyCode <= 90) || //Let us allow the capital letters too
((allowSpaces == true) && (keyCode == 32)) //allow space conditionally
//based on the control's choice
)
{
return true;
}
return false;
};
//Function to create alphabetic text box only - using regex
function AcceptAlphabetsOnlyEx(event, allowSpaces)
{
if(allowSpaces == true)
{
return AcceptRegExOnly(event, /^[a-zA-Z ]$/);
}
return AcceptRegExOnly(event, /^[a-zA-Z]$/);
};
现在，让我们看看它们如何从 aspx 标记中使用。
<asp:TextBox ID="TextBox1" runat="server" onkeypress="return AcceptAlphabetsOnly(event, false);">
</asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server" onkeypress="return AcceptAlphabetsOnlyEx(event, false);">
</asp:TextBox>
仅接受数字
有两个函数可以实现此目的。第一个函数使用keycode 来实现。第二个函数使用正则表达式来实现。这两个函数都会完成相同的任务，但如果由于某种原因，keycode 没有给出正确的结果，可以使用基于正则表达式的实现。请注意，两个实现都接受一个Boolean 参数来指定是否允许小数点。
//Function to create numeric text box only - using keycodes
function AcceptNumericOnly(event, allowPeriod)
{
var keyCode = event.which ? event.which : event.keyCode;
if( (keyCode >= 48 && keyCode <= 57) || //lets allow only numerics
((allowPeriod == true) && (keyCode == 46)) //allow period conditionally
//based on the control's choice
)
{
return true;
}
return false;
};
//Function to create numeric text box only - using regex
function AcceptNumericOnlyEx(event, allowPeriod)
{
if(allowPeriod == true)
{
return AcceptRegExOnly(event, /^[0-9.]$/);
}
return AcceptRegExOnly(event, /^[0-9]$/);
};
现在，让我们看看它们如何从 aspx 标记中使用。
<asp:TextBox ID="TextBox3" runat="server" onkeypress="return AcceptNumericOnly(event, false);">
</asp:TextBox>
<asp:TextBox ID="TextBox4" runat="server" onkeypress="return AcceptNumericOnlyEx(event, false);">
</asp:TextBox>
仅接受字母和数字
有两个函数可以实现此目的。第一个函数使用keycode 来实现。第二个函数使用正则表达式来实现。这两个函数都会完成相同的任务，但如果由于某种原因，keycode 没有给出正确的结果，可以使用基于正则表达式的实现。请注意，两个实现都接受两个Boolean 参数。第一个用于指定是否允许空格，第二个用于指定是否允许小数点。
//Function to create alphanumeric text box - using keycodes
function AcceptAlphaNumericOnly(event, allowSpaces, allowPeriod)
{
if( (AcceptAlphabetsOnly(event, allowSpaces) == true) || //Create alphabetic text box
(AcceptNumericOnly(event, allowPeriod) == true) //Create numeric text box
)
{
return true;
}
return false;
};
//Function to create alphanumeric text box - using regex
function AcceptAlphaNumericOnlyEx(event, allowSpaces, allowPeriod)
{
if(allowSpaces == true && allowPeriod == false)
{
return AcceptRegExOnly(event, /^[a-zA-Z0-9 ]$/);
}
if(allowPeriod == true && allowSpaces == false)
{
return AcceptRegExOnly(event, /^[a-zA-Z0-9.]$/);
}
if(allowPeriod == true && allowSpaces == true)
{
return AcceptRegExOnly(event, /^[a-zA-Z0-9 .]$/);
}
return AcceptRegExOnly(event, /^[a-zA-Z0-9]$/);
};
现在，让我们看看它们如何从aspx 标记中使用。
<asp:TextBox ID="TextBox5" runat="server"
onkeypress="return AcceptAlphaNumericOnly(event, false, false);">
</asp:TextBox>
<asp:TextBox ID="TextBox6" runat="server"
onkeypress="return AcceptAlphaNumericOnlyEx(event, false, false);">
</asp:TextBox>
仅接受日期特定字符
//This function will create the date text box
function AcceptDateCharacters(event, separator)
{
if(separator.length != 1) //only pass single character separators here
{
return false;
}
//lets allow digits
var expression = "^[0-9";
//lets allow the separator character
expression += separator;
//lets complete the expression
expression += "]$";
var regex = new RegExp(expression);
return AcceptRegExOnly(event, regex)
};
现在，让我们看看如何使用此函数来接受以“-”作为分隔符的日期字符串。
<asp:TextBox ID="TextBox8" runat="server" onkeypress='return AcceptDateCharacters(event, "-");'>
</asp:TextBox>
设置表单提交前的验证
现在，在继续之前，我们将查看提交按钮的标记代码，因为现在我们将处理客户端验证，然后在提交到服务器。
<asp:Button ID="Button1" runat="server" Text="Submit" OnClientClick="return validateForm();" />
检查输入字段是否为必填字段
现在让我们看看将在提交前调用的函数，以确保必填字段的值是否已存在。
//This function will check for the mandatory field
function CheckMandatoryInput(input)
{
if(input.value.length == 0)
{
input.style.borderColor="Red";
input.title = "This field is mandatory";
return false;
}
input.style.borderColor="";
input.title = "";
return true;
};
以及如何从客户端标记页面使用它。
function validateForm()
{
if(CheckMandatoryInput(document.getElementById("TextBox1")) == false)
{
return false;
}
}
将输入字段与正则表达式进行匹配
现在让我们看看将在提交前调用的函数，以确保输入字段中的值是否符合所需的正则表达式。
//This function will check for the input using regular expression
function CheckWithRegExp(input, regex, mandatory)
{
if(mandatory == true && CheckMandatoryInput(input) == false)
{
return false;
}
if(regex.test(input.value) == false)
{
input.style.borderColor="Red";
input.title = "This is not a valid input";
return false;
}
input.style.borderColor="";
input.title = "";
return true;
};
以及如何从客户端标记页面使用它。
function validateForm()
{
if(CheckWithRegExp(document.getElementById("TextBox1"), /^[a-z]{3,10}$/, true) == false)
{
return false;
}
}
现在，我们已成功配置了输入字段以接受所需输入，并提供了非常基本的客户端验证，然后在提交表单。
关注点
这个 JavaScript 是我为客户端验证创建的。发布这篇文章的主要想法是由于在 **Codeproject** 的“快速提问”部分提出的问题。似乎有许多初学者在尝试实现此类功能时遇到困难，或许这个可重用代码可以帮助到他们。
历史
- 2012年6月20日 - 初始版本