JSClientValidator-客户端javascript验证新模式

JSClientValidator-客户端javascript验证新模式

2005-09-21

在客户端控件javascript验证模式中，我已经介绍了当前大量在web上用于客户端控件验证的函数式验证模式，也简单的提出了使用封装的javascript类验证的方法。这次，我要向大家介绍的是如何使用JSClientValidator类进行客户端控件验证、JSClientValidator的设计思想、优点和进行自动化验证的设想。

内容
JSClientValidator的设计思想
如何使用JSClientValidator进行客户端控件验证
自动javascript验证设想

JSClientValidator.js下载：/Files/chwkai/ClientValidator.rar

JSClientValidator的设计思想

JSClientValidator类是为了更简化script验证代码而编写的。首先来看一段经典的函数式javascript验证代码段：

1 <script language="javascript">
2  <!--
3     function ValidateInput()
4     {
5         // fucCheckNull为判断输入字符串是否为空的函数
6          if (fucCheckNull(document.getElementById("txbName").value) == true)
7         {
8             window.alert("请输入用户名");
9             document.getElementById("txbName").focus;

return false;
}

//其他控件验证代码..

return true;
}
-->
</script>

在处理不同的页面时，开发人员必须在每个页面都copy这样的代码。在上一篇文章中，我已经说过这样的模式不仅要重复的编写类似的验证代码，代码段结构差，而且为了实现错误提示，必须在每个if段添加上focus和alert代码。

下面是一段采用JSClientValidator类进行验证的代码段，可以看出验证类的设计思想

1 <script language="javascript">
2         <!--
3             function ValidateInput()
4             {
5                 var validator = new ClientValidator();
6                 var bValid = false;
7
8                 // 验证名称是否为空
9                 validator.AddEmpty(document.getElementById("txbName"), null, "名称不能为空");

// 验证备注是否为空，且长度是否合法
validator.AddLength(
document.getElementById("txbRemark"), null, true, "备注不能为空",
10, 300, "备注长度应在10－300字内"
);

bValid = validator.RunValidate();

if (bValid == false)
{
// 提示错误信息
window.alert(validator.lastErrorMessage);
// 定位自出错控件
validator.lastErrorControl.focus();
}
}
-->
</script>

通过AddXXX方法，把相应类型的验证项加到验证队列中，最后运行RunValidate()进行批量认证，返回控件验证是否合法。并且由lastErrorControl和lastErrorMessage可以得到出错的控件和相应的错误信息。

通过对开发过程中的javascript验证代码进行统计，最常进行的验证是“xxx输入值不能为空”，而且其他格式的校验通常是以“非空”为前提的。因此，JSClientValidator中保持着两个Array，并且把“不能为空”验证（简称EmptyValidate）作为第一项验证。

1、控件数组：保存着所有待验证的控件

1 // 控件数组
2 this.Controls = new Array();
3
4
5 /**
6 * 控件类
7 *
8 * @param ctl        控件对象
9 * @param strValue    控件值，为null时由控件对象的value属性获取
* @param bCheckEmpty    是否进行为空判断
* @param strErrorMessage为空时提示的错误信息，bCheckEmpty==false时可为null
*
* 创建人：陈文凯
* 创建日期：2005年9月12日
* 修改人：
* 修改日期：
**/
function ControlItem(ctl, strValue, bCheckEmpty, strErrorMessage)
{
this.Control = ctl;
this.Value = (strValue == null ? ctl.value : strValue);
this.CheckEmpty = bCheckEmpty;
this.Message = strErrorMessage;
}

/**
* 添加控件对象
*
* @param ctl            控件对象
* @param strValue        控件输入值
* @param bCheckEmpty    是否执行输入值非空校验
* @param strErrorMessage当输入值为空时的提示信息
* @return        控件对象在控件数组中的下标
*
* 创建人：陈文凯
* 创建日期：2005年9月12日
* 修改人：
* 修改日期：
**/
function AddControl(ctl, strValue, bCheckEmpty, strErrorMessage)
{
var index = this.Controls.length;
var ctlItem = new ControlItem(ctl, strValue, bCheckEmpty, strErrorMessage);
this.Controls[index] = ctlItem;

return index;
}

当执行验证时，先遍历Control数组，对那些需要进行EmptyValidate验证的控件进行验证。若验证通过，在执行其他各种验证项的验证。

2、验证项数组：保存控件的验证方式的数组，下面的代码演示了可接受的验证方式。注意，其中还有一种验证项类型为“自定义验证项”，可以指定验证函数进行验证。类型验证项（Type）可接受自定义的正则式为验证格式。通过这两种验证类型＋内置的验证类型（Empty，相等，长度）等，已经能够覆盖web页面上常用的验证方式。
（1）验证方式：

1 /**
2     * 验证方式枚举型定义
3     *
4     **/
5     function ValidateTypeEnum()
6     {
7         // 判断是否为空
8         this.Empty = "client.empty";
9
// 判断是否相等
this.Equal = "client.equal"

// 判断长度是否符合要求
this.Length = "client.length";

// 判断是否符合类型（包括以下定义的数字－时间）
this.Type = "client.Type";

// 判断是否为数字
this.Digit = "client.digit";

// 判断是否整数
this.Integer = "client.int";

// 判断是否正整数
this.Unsigned = "client.uint";

// 判断是否email
this.Email = "client.email";

// 判断是否日期，格式为yyyy-MM-dd
this.Date =    "client.date";

// 判断是否为时间，格式为yyyy-MM-dd hh:mm:ss
this.Time =    "client.time";

// 自定义验证项
this.Extend = "client.extend";
&nb%