无需额外代码的客户端验证
1.86/5 (4投票s)
2006年6月5日
1分钟阅读
39169
我们可以使用正则表达式验证 Web 表单，只需将正则表达式放在隐藏字段的值属性中，让生活更轻松。
引言
这是一个简单的 JavaScript 代码。通过使用此代码，我们可以使用正则表达式验证 Web 表单。它的优点是，您无需编写额外的代码，只需将适当的正则表达式放在隐藏字段的值属性中，让生活更轻松。
详细信息
其背后的想法是，要验证名为 "text1" 的控件，您需要添加两个隐藏输入字段。一个用于 验证，另一个用于控件 标题。验证字段的名称将是 "regex_text1"，标题的名称将是 "caption_text1"。
您的输入控件将根据您在 "regex_text1" 输入字段的值属性中编写的正则表达式进行验证。
您还需要做的一件事是，在用于提交的按钮单击时调用以下函数。
function ValidateForm()
{
els=new Array();
els=document.forms[1].elements;
for(i=0; i<els.length; i++)
{
var regex="regex_" + els[i].name;
if(els[regex]!=null)
{
var regexValue=els[regex].value;
var elValue=els[i].value;
var re = new RegExp(regexValue);
if(!elValue.match(re))
{
var caption="caption_" + els[i].name;
var captionValue="字段";
if(els[caption]!=null)
captionValue=els[caption].value;
alert("无效 " + captionValue);
return;
}
}
}
document.forms[1].submit();
}
您的 HTML 将如下所示。
<input type="text" name="txtSurname">
<input type="hidden" name= "caption_txtSurname" value="姓氏">
<input type="hidden" name= "regex_txtSurname" value="^[a-zA-Z]+[a-zA-Z ]*$">
<input type="text" name="txtPostCode">
<input type="hidden" name="regex_txtPostCode" value="^([0-9]+[0-9-]*[0-9]+)?$">
<input type="hidden" name= "caption_txtPostCode" value="邮政编码">
<input type="button" name="Submit" value="提交" onClick="javascript:ValidateForm()">