验证控件网页代码分析

建立一个简单的网页,一个文本框,一个按钮,一个禁止空白的验证控件.网页打开时,传到客户端有三个文件,我们用M表示主页,W1表示从1,W2表示从2,网页的执行过程如下:
先设置变量theForm为页面的表单

var  theForm  =  document.forms[ ' form1 ' ];
if  ( ! theForm)
  theForm  =  document.form1;

为什么用两种方法呢?因为在netscape中不支持document.form1的方式,也有这样的写法

if  (window.navigator.appName.toLowerCase().indexOf( " netscape " )  >   - 1 )
  theform  =  document.forms[ " Form1 " ];
else
  theform  =  document.Form1;

在我系统中,只有IE,因此这段代码可简化为

var  theForm  =  document.forms[ ' form1 ' ];

接着转到附带的两个JS文件中执行变量的赋值及初使的代码
W1

var  __pendingCallbacks  =   new  Array();
var  __synchronousCallBackIndex  =   - 1 ;
// 判断是不是IE,是IE,返回false,变量的本意是"不是微软DOM浏览器"
var  __nonMSDOMBrowser  =  (window.navigator.appName.toLowerCase().indexOf( ' explorer ' )  ==   - 1 );
var  __theFormPostData  =   "" ;
var  __theFormPostCollection  =   new  Array();
var  __disabledControlArray  =   new  Array();
var  __defaultFired  =   false ;

W2

var  Page_ValidationVer  =   " 125 " ;
var  Page_IsValid  =   true ;
var  Page_BlockSubmit  =   false ;
var  Page_InvalidControlToBeFocused  =   null ;

再回到主页继续执行

// 定义数组变量为本页的验证控件组
var  Page_Validators  =    new  Array(document.getElementById( " RequiredFieldValidator1 " ));
// 定义变量为本页的验证控件,netscape不支持document.all,因此还要用document.getElementById
var  RequiredFieldValidator1  =  document.all  ?  document.all[ " RequiredFieldValidator1 " ] : 

document.getElementById( " RequiredFieldValidator1 " );
// 验证控件的一些属性,JS中属性是可以随时增加的
RequiredFieldValidator1.controltovalidate  =   " TextBox1 " ;
RequiredFieldValidator1.errormessage  =   " RequiredFieldValidator " ;
RequiredFieldValidator1.evaluationfunction  =   " RequiredFieldValidatorEvaluateIsValid " ;
RequiredFieldValidator1.initialvalue  =   "" ;

var  Page_ValidationActive  =   false ;
// 如果ValidatorOnLoad是函数的话,则执行该函数.这种写法在以下出现过很多次.
if  ( typeof (ValidatorOnLoad)  ==   " function " )
  ValidatorOnLoad();

接着跳转到W2中执行ValidatorOnLoad.它的作用就是在装载时就“挂钩”.

function  ValidatorOnLoad()
{
  //如果本页没有任何验证控件的话,就不必执行了
  if (typeof(Page_Validators) == "undefined")
    return;
  var i, val;
  //对每个验证控件都进行设置
  for (i = 0; i < Page_Validators.length; i++)
  {
    val = Page_Validators[i];
    //如果验证控件有设evaluationfunction属性的话 **详见说明**
    if (typeof(val.evaluationfunction) == "string")
      eval("val.evaluationfunction = " + val.evaluationfunction + ";");
      //实际执行 val.evaluationfunction = RequiredFieldValidatorEvaluateIsValid;
      //RequiredFieldValidatorEvaluateIsValid是在W2中的具体函数
    if (typeof(val.isvalid) == "string")
    {
      if (val.isvalid == "False")
      {
        val.isvalid = false;
        Page_IsValid = false;
      }
      else
        val.isvalid = true;
    }
    else
      val.isvalid = true;
    if (typeof(val.enabled) == "string")
      val.enabled = (val.enabled != "False");
    if (typeof(val.controltovalidate) == "string")
      ValidatorHookupControlID(val.controltovalidate, val);
    if (typeof(val.controlhookup) == "string")
      ValidatorHookupControlID(val.controlhookup, val);
  }
  Page_ValidationActive = true;
}

以上子程序是完成对页面所有验证控件的参数进行正确的设置，其中有一段代码，想法太利害了：

     if  ( typeof (val.evaluationfunction)  ==   " string " )
      eval( " val.evaluationfunction =  "   +  val.evaluationfunction  +   " ; " );

如果验证控件的某个属性还是字符串的话，则用eval对其进行设置，使其变成指向这个函数。这样，我们在设置属性时，可以使用字符串，而实际中又转为指向该名称的函数。后面的几个也使用了类似的代码来实现对属性的设置。

evaluationfunction：？用于计算待验证控件的值，前面有赋string类型的值
isvalid：返回待验证控件是否符合要求
enabled：验证控件是否激活
controltovalidate：侍验证的控件，前面有赋string类型的值
controlhookup：？
由于isvalid之前没有赋值，因此代码是走到else的，val.isvalid = true;，即默认是符合要求的，而之前，我们也有对Page_IsValid设为true，即整个页面也是符合要求的。
enabled也是没有赋值，这里就跳过，可能靠控件的默认值来保证它是true的。如果有赋一个字符串的值的话，

(val.enabled != "False") 则是为"true"时返回true，为"False"时返回false。

这里有一个子程序ValidatorHookupControlID，它的入口参数是待验证的控件名（字符串型），与验证控件本身（对象）。

function  ValidatorHookupControlID(controlID, val)
{
  //如果第一个参数不是字符串，就不再继续，立即返回
  if (typeof(controlID) != "string")
    return;
  //设置对象为待验证的控件
  var ctrl = document.getElementById(controlID);
  //该待验证的控件必须存在，并且不能为空，则进行“挂钩”
  if ((typeof(ctrl) != "undefined") && (ctrl != null))
    ValidatorHookupControl(ctrl, val);
  else
  {
    //否则禁用验证控件
    val.isvalid = true;
    val.enabled = false;
  }
}

这里又引出“挂钩”函数ValidatorHookupControl

function  ValidatorHookupControl(control, val)
{
  //如果控件不存在则返回
  if (typeof(control.tagName) != "string")
    return;  
  if (control.tagName != "INPUT" && control.tagName != "TEXTAREA" && control.tagName != "SELECT")
  {
    //如果控件不是INPUT/TEXTAREA/SELECT这些控件，则看这个控件的子控件
    var i;
    for (i = 0; i < control.childNodes.length; i++)
      ValidatorHookupControl(control.childNodes[i], val);
      //这里使用了递归
    return;
  }
  else
  {
    //如果待验证控件的Validators还没定义的话，先要去定义
    if (typeof(control.Validators) == "undefined")
    {
      control.Validators = new Array;
      var eventType;
      if (control.type == "radio")
        eventType = "onclick";
      else
      {
        eventType = "onchange";
        if (typeof(val.focusOnError) == "string" && val.focusOnError == "t")
          ValidatorHookupEvent(control, "onblur", "ValidatedControlOnBlur(event); ");
          //修改得到焦点事件的处理程序
      }
      //修改改变事件的处理程序
      ValidatorHookupEvent(control, eventType, "ValidatorOnChange(event); ");
      //对于文本框、密码框、文件文本框
      if (control.type == "text" ||
          control.type == "password" ||
          control.type == "file")
        ValidatorHookupEvent(control, "onkeypress", "if (!ValidatedTextBoxOnKeyPress(event)) 

return false; ");
        //修改按键事件的处理程序
    }
    //待验证控件的验证控件指向本验证控件
    control.Validators[control.Validators.length] = val;
  }
}

还有修改某个控件的某个事件处理程序

function  ValidatorHookupEvent(control, eventType, functionPrefix)
{
  var ev;
  //设置ev为待验证控件的对应事件
  eval("ev = control." + eventType + ";");
  //其类型一般是"object"
  if (typeof(ev) == "function")
  {
    ev = ev.toString();
    ev = ev.substring(ev.indexOf("{") + 1, ev.lastIndexOf("}"));
  }
  else
    ev = "";
  var func;
  if (navigator.appName.toLowerCase().indexOf('explorer') > -1)
    //如果是IE浏览器
    func = new Function(functionPrefix + " " + ev);
  else
    func = new Function("event", functionPrefix + " " + ev);
  //待验证控件的事件处理设置为指定的函数
  eval("control." + eventType + " = func;");
}

这些执行完成后，页面也就装载好了。
未完，待继