我爱爷爷奶奶教案:表单验证方式的通用化

来源：百度文库编辑：中财网时间：2024/04/28 19:21:57

在上一篇“Web页面表单域验证方式的改进“中，我们通过把验证法则（正则表达式和是否必填字段）写在表单域中，将验证过程和验证法则成功的分离，从而减少了重复代码，使验证变得简单易行，在实际使用中，我们可以把验证过程放在一个JS文件中，对于全输入验证界面，在页面的表单验证部分只需要调用其中的checkForm函数就能进行有效验证，页面上不再需要书写重复性高的JS验证代码；对于复杂的表单，比如其中含有复选框或是需要两个文本框比较的地方，这种方法也可让你不写通用验证代码而把主要精力放在特殊的验证上。这些能减轻不少工作量，让繁琐的工作变得轻松愉快起来。

下面我们看一看这种用法的实际使用。

首先，我们可以把验证过程放在一个JS文件中，具体代码如下：
formchecker.js

/**//**

* Check form

function checkForm(vform)

{

for(var i=0;i{

if(vform.elements[i].type=="text")

{

var checkResult=checkTextBox(vform.elements[i]);

var name=vform.elements[i].getAttribute("name");

if(checkResult)

{

document.getElementById(name+"Msg").className="feedbackHide";

}

else

{

document.getElementById(name+"Msg").className="feedbackShow";

vform.elements[i].focus();

return false;

}

return true;

}

/**//**

* Check text field in the form

function checkTextBox(vTextBox)

{

var validChar=vTextBox.getAttribute("validChar");

var isRequired=vTextBox.getAttribute("isRequired");

var inputValue=vTextBox.value;

if(isRequired!="true" && inputValue.length<1)

{

return true;

}

else

{

var regexStr="^"+validChar+"$";

var regex=new RegExp(regexStr);

return regex.test(inputValue);

}

/**//**

* Remove Extra Char in textbox

function removeExtraChar(vTextBox,event)

{

var maxlength=parseInt(vTextBox.getAttribute("maxlength"));

var inputValue=vTextBox.value;

if(inputValue.length>=maxlength)

{

event.keyCode=9;

}

}
下面想验证一个用户登录页面，它的页面部分代码如下：

@ page contentType="text/html; charset=UTF-8" %>

"我的事务备忘录"用户登录页面

type="text/css" />

String msg = (String) request.getAttribute("Msg");

if (msg != null) {

out.print(msg);

}

8 用户登录:

用户名:

name="userName"

validChar="[\u4E00-\u9FA5]{2,3}"

isRequired="true"

maxlength="8"

onkeydown="removeExtraChar(this,event)"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

(必填)

用户名必须输入两到三位汉字

密码:

name="userPswd"

validChar="\w+"

isRequired="true"

maxlength="8"

onkeydown="removeExtraChar(this,event)"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

(必填)

密码必须输入英语或数字

如果没有用户请点击这里注册

请注意其中没有任何页面验证的JS代码，只有在表单验证的地方调用formchecker.js中的函数。

不需要写JS代码，只需要引入formchecker.js，就实现了表单的验证，下面是验证效果之一：

对于复杂一些的页面，在formchecker.js的帮助下也能有效减少验证代码量，你只要书写一些特殊的通过validchar不能验证的代码即可，比如说如下注册页面：

你只要书写两次密码比较的JS代码，其它的还是可以让checkForm函数帮你完成。具体代码如下：
<%@ page contentType="text/html; charset=UTF-8" %>

"我的事务备忘录"用户注册页面

type="text/css" />

<%
    String msg = (String) request.getAttribute("Msg");
    if (msg != null) {
        out.print(msg);
    }
%>

         8 注册个人用户









                用户名:

                                               name="userName"
                           validChar="[\u4E00-\u9FA5]{2,3}"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                     (必填)
                    用户名必须输入两到三位汉字



                密码:

                                               name="userPswd"
                           validChar="\w+"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                     (必填)
                    密码必须输入英语或数字



                再次输入密码:

                                               name="userPswd2"
                           validChar="\w+"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                     (必填)
                    密码必须输入英语或数字

注意看上面的js代码比常规方案减少了多少。

如果页面上有其它控件如复选框，列表框等也可照此办理，把文本框的通用验证交给formchecker.js的checkForm和checkTextBox进行，在页面的js代码中只写特殊的处理，这样能减轻不少工作量，让繁琐的工作变得轻松愉快起来。

关于MYIE的通用表单关于通用ASP表单处理的问题 js验证表单的一个问题！用JavaScript验证表单的程序求ASP验证表单的代码验证表单失败！求助怎样用javascript验证表单？？？什么软件可以自动登录有验证码的表单? 各位大侠帮帮忙asp表单验证的问题 javascrip 表单验证里的内容不能为空再看看这个JavaScript验证表单的问题我做的表单验证里只有数字验证这一项不对..高手帮帮忙啊.. 求个表单验证脚本 vb script 验证 asp表单表单的作用是什么？表单数据的提交方式有哪些？表单的作用是什么？表单数据的提交方式有哪些？傲游的“保存当前表单”与“保存为通用表单”这两个功能有区别吗？用javascript验证表单怎么实现验证通过弹出成功提示窗口同时连接到相应的页面？偶需些C＃的关于安全方面的表单输入验证函数，谁能提供一些？谁知道阿里巴巴的注册页面表单验证效果是如何实现的？通用英语证书如何验证迅捷自助表单 ,.我在自己的电脑上怎么验证它已经发送成功了?? 在客户端对表单的文本框进行提交验证遇到困难了请问用VF编写一个有关密码验证的表单该怎么写代码，谢谢了