基于 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="密码" onkeyup="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"> </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"> </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"> </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");
}
}
}