基于 prototype 实现的表单验证

form.html 代码 [演示页面]

<div class="continer">
    <form id="Form1" name="Form1" method="post" action="" isvalidate="true">
      <ul class="form">
        <li>
          <span id="UsernameLabel" class="label">用户名：</span>
          <span id="UsernameRequired" class="required">*</span>
          <span id="UsernameElement" class="element">
            <input type="text" id="Username" name="Username" title="用户名" validate="IsNull|IsLength[6,24]" class="text" />
          </span>
        </li>
        <li>
            <span id="UsernameHint" class="hint">可以使用数字、字母或中文，长度 6~24 </span>
        </li>
        <li>
          <span id="PasswordLabel" class="label">密码：</span>
          <span id="PasswordRequired" class="required">*</span>
          <span id="PasswordElement" class="element">
            <input type="password" id="Password" name="Password" title="密码" οnkeyup="IsPasswordStrength('Password')" validate="IsNull|IsLength[6,24]" class="text" />
          </span>
        </li>
        <li>
            <span id="PasswordHint" class="hint">可以使用数字、字母，长度 6~24 </span>
            <span id="StrengthHint" class="block">
                <span id="StrengthL"></span>
                <span id="StrengthM"></span>
                <span id="StrengthH"></span>
            </span>
        </li>
        <li>
          <span id="ConfirmLabel" class="label">确认密码：</span>
          <span id="ConfirmRequired" class="required">*</span>
          <span id="ConfirmElement" class="element">
            <input type="password" id="Confirm" name="Confirm" title="确认密码" validate="IsNull|IsConfirm['Password']" class="text" />
          </span>
        </li>
        <li>
            <span id="ConfirmHint" class="hint">重复上面的密码</span>
        </li>
        <li>
          <span id="SexLabel" class="label">性别：</span>
          <span id="SexRequired" class="required">&nbsp;</span>
          <span id="SexElement" class="element">
            <input type="radio" id="Sex1" name="Sex" value="1" />
            <label for="Sex1">男士</label>
            <input type="radio" id="Sex2" name="Sex" value="2" />
            <label for="Sex2">女士</label>
          </span>
        </li>
        <li>
          <span id="BirthdayLabel" class="label">出生日期：</span>
          <span id="BirthdayRequired" class="required">&nbsp;</span>
          <span id="BirthdayElement" class="element">
            <select id="BirthdayYear" name="BirthdayYear" special="year">
              <option>- 年份 -</option>
            </select>
            <select id="BirthdayMonth" name="BirthdayMonth" special="month">
              <option>- 月份 -</option>
            </select>
            <select id="BirthdayDay" name="BirthdayDay" special="day">
              <option>- 日份 -</option>
            </select>
          </span>
        </li>
        <li>
          <span id="EmailLabel" class="label">电子邮箱：</span>
          <span id="EmailRequired" class="required">&nbsp;</span>
          <span id="EmailElement" class="element">
            <input type="text" id="Email" name="Email" class="text" title="电子邮箱" validate="IsEmail" />
          </span>
        </li>
        <li>
            <span id="EmailHint" class="hint">输入您常用的电子邮箱，可以用于接收通知及找回密码</span>
        </li>
        <li>
          <span class="button">
            <span class="submitout">
              <input type="submit" id="SubmitOk" name="SubmitOk" value="同意条款，立即注册" class="submitin" />
            </span>
          </span>
        </li>
      </ul>
  </form>
</div>

validater.js 代码 [验证脚本]

/*   ======================================================================================
    表单验证方法
    ======================================================================================  */
function IsNull(Id){
    var _Element = $(Id);
    if (_Element!=null){
        if (!Form.Element.present(Id)){
            SetElementFailure(Id, _Element.getAttribute("title") + "不能为空。");
            return false;
        }
    }
    return true;
}
function IsLength(Id, Min, Max){
    var _Element = $(Id);
    if (_Element!=null){
        var _Value = Form.Element.getValue(Id);
        if (_Value.length<Min || _Value.length>Max){
            SetElementFailure(Id, _Element.getAttribute("title") + "长度必须在 " + Min + " ~ " + Max + " 之间。");
            return false;
        }
    }
    return true;
}
function IsEnglish(Id){
    var _Element = $(Id);
    if (_Element!=null){
        if(!(/^[A-Za-z0-9]+$/.test(Form.Element.getValue(Id)))){
            SetElementFailure(Id, _Element.getAttribute("title") + "只能由数字及字母组成。");
            return false;
        }
    }
    return true;
}
function IsConfirm(Id, Confirm){
    var _Element = $(Id);
    var _Confirm = $(Confirm);
    if (_Element!=null && _Confirm!=null){
        if(Form.Element.getValue(Id) != Form.Element.getValue(Confirm)){
            SetElementFailure(Id, _Element.getAttribute("title") + "必须与" + _Confirm.getAttribute("title") + "相同。");
            return false;
        }
    }
    return true;
}
function IsEmail(Id){
    var _Element = $(Id);
    if (_Element!=null){
        var _Regex = /[_a-zA-Z/d/-/.]+@[_a-zA-Z/d/-]+(/.[_a-zA-Z/d/-]+)+$/;
        if (Form.Element.present(Id) && !_Regex.test(Form.Element.getValue(Id)))
        {
            SetElementFailure(Id, _Element.getAttribute("title") + "格式不正确。");
            return false;
        }
    }
    return true;
}
/*  ======================================================================================
    加载表单验证
    ======================================================================================  */
function InitForms(){
    var _Forms = document.getElementsByTagName("Form");
    for(i=0; i<_Forms.length; i++){
        if (_Forms[i].getAttribute("isvalidate")=="true"){
            AddFormValidater(_Forms[i].id);
        }
    }
}
function AddFormValidater(Id)
{
    var _Form = $(Id);
    if (_Form!=null){
        Form.getElements(_Form).each(function(_Element){
            if (!String.isEmpty(_Element.getAttribute("validate"))){
                Event.observe(_Element,'focus',function (){
                    SetElementFocus(_Element.id);
                },false);
                Event.observe(_Element,'blur',function (){
                    var _Result = ElementValidate(_Element.id);
                    SetElementResult(_Element.id, _Result);
                    if (_Result){
                        SetElementNormal(_Element.id);
                    }
                },false);
            }
        });
        Event.observe(_Form,'submit',function(_Form){
            Form.getElements(Id).each(function(_Element){
                if (HasElementValidate(_Element.id)){
                    var _Result = ElementValidate(_Element.id);
                    SetElementResult(_Element.id, _Result);
                    if (_Result){
                        SetElementNormal(_Element.id);
                    }else{
                        Event.stop(_Form);
                        return false;
                    }
                }else{
                    SetElementNormal(_Element.id);
                }
            });
            return true;
        },false);
    }
}
function ElementValidate(Id){
    var _Element = $(Id);
    if (_Element!=null){
        var _Validates = _Element.getAttribute("validate").split("|");
        for(i=0; i<_Validates.length; i++){
            var _Function;
            if (_Validates[i].indexOf("[")>=0){
                _Function = _Validates[i].substring(0, _Validates[i].indexOf("["));
                _Function += "(/"" + Id + "/", " + _Validates[i].substring(_Validates[i].indexOf("[")).replace("[","").replace("]","") + ")";
            }else{
                _Function = _Validates[i] + "(/"" + Id + "/")";
            }
            if (!eval(_Function)){
                return false;
            }
        }
    }
    return true;
}
/*  ======================================================================================
    表单验证提示
    ======================================================================================  */
function HasElementValidate(Id){
    var _Element = $(Id);
    if (_Element!=null){
        return (!String.isEmpty(_Element.getAttribute("validate")));
    }else{
        return false;
    }
}
function SetElementResult(Id, Result){
    var _Element = $(Id);
    if (_Element!=null){
        _Element.setAttribute("result", Result);
    }
}
function SetElementFailure(Id, Message){
    var _Validate = $(Id + "Hint");
    if (_Validate!=null){
        _Validate.className = "hint_false";
        if (_Validate.getAttribute("history")==null){
            _Validate.setAttribute("history", _Validate.innerHTML);
        }
        _Validate.innerHTML = Message;
    }
}
function SetElementFocus(Id){
    var _Validate = $(Id + "Hint");
    if (_Validate!=null){
        _Validate.className = "hint_focus";
        if (_Validate.getAttribute("history")!=null){
            _Validate.innerHTML = _Validate.getAttribute("history");
        }
    }
}
function SetElementNormal(Id){
    var _Validate = $(Id + "Hint");
    if (_Validate!=null){
        _Validate.className = "hint";
        if (_Validate.getAttribute("history")!=null){
            _Validate.innerHTML = _Validate.getAttribute("history");
        }
    }
}