基于prototype.js验证框架(validation.js)的三个应用

最近对prototype.js用的比较多,同时发现了一个基于prototype.js的验证框架: validation.js really easy field validation with prototype,下面是我在开发中用到的三个例子.

前提条件:
首先要在html页面中引入几个js


<script type='text/javascript' src='../script/prototype.js'></script>


<script type='text/javascript' src='../script/validation.js'></script>


<script type='text/javascript' src='../script/effects.js'></script> (可选)

加几段css




input.disabled {...}{


border: 1px solid #F2F2F2;


background-color: #F2F2F2;


}








input.required, textarea.required {...}{


border: 1px solid #00A8E6;


}








input.validation-failed, textarea.validation-failed {...}{


border: 1px solid #FF3300;


color : #FF3300;


}




input.validation-passed, textarea.validation-passed {...}{


border: 1px solid #00CC00;


color : #000;


}








.validation-advice {...}{


margin: 5px 0;


padding: 5px;


background-color: #FF3300;


color : #FFF;


font-weight: bold;


}

应用一:该例子仅使用前台脚本进行验证
需求:
查询条件

当CSO NO、AGREEMENT NO、流水号中任一项有值时，其他项都可为空

2. 当CSO NO、AGREEMENT NO、流水号三项都为空时，TARIFF CODE为必输，其他项选输

html代码:


<td class = "label">CSO Number</td>


<td><input type="text" name="csoNumber" id = "csoNumber"></td>


<td class = "label">Agreement Number</td>


<td><input type="text" name="agreementNumber" id = "agreementNumber"></td>


<td class = "label">SequenceNumber Number</td>


<td><input type="text" name="sequenceNumber" id = "sequenceNumber"></td>


<td class = "label">Tariff Code</td>


<td><input type="text" name="tariffCode" id = "tariffCode"></td>


<td colspan = "6" align = "center"><button class = "submit" id = "search">Search</button></td>

javascript脚本:




window.onload = function()...{


// 注册查询按钮事件




Event.observe("search", "click", function()...{


var validator = Validation.get("IsEmpty");




if ([$F("csoNumber"), $F("agreementNumber"), $F("sequenceNumber")].all(validator.test))...{


["required"].all(Validation.test.bind($("tariffCode")));


}






});

应用二: 该例子通过ajax结合后台来进行验证
需求:
sapid和password必输
且必须从后台数据库找到sapid和password对应的记录, 否则登陆不成功,并给出提示信息

html代码:

<form method=post action="requisition.html" id = "frmLogin">
<table align = "center" style = "height:100%">
<tr>
<td>
<fieldset style = "padding:10px">
<legend>Login</legend>
<table>
<tr><td colspan = "2"><input type = "hidden" id = "errMsg"></td></tr>
<tr>
<td class = "label"><span class = "requiredFlag">*</span>SAP ID</td>
<td><input type="text" name="sapId" id = "sapId" class = "required"></td>
</tr>
<tr>
<td class = "label"><span class = "requiredFlag">*</span>Password</td>
<td><input type="password" name="password" id = "password" class = "required"></td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" class = "submit" value = "Login">
<button class = "submit" onclick = "Login.goRegister()">Register</button></td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</form>

javascript脚本

window.onload = function(){
// 自定义验证器并注册到Validation中
var validatorName = "validate-login-info";
Validation.add(validatorName, "", function(){return false;});

// 验证器初始化
var validator = new Validation('frmLogin', {stopOnFirst:true, immediate:true});

// 提交前进行后台验证
Event.observe("frmLogin", "submit", function(ev){
var result = validator.validate();
if (result){
var request = new Ajax.Request(
"http://localhost:8080/agreement/CheckLoginInfo", // 提交的URL
{
method: 'get',
asynchronous: false,
parameters: Form.serialize("frmLogin"),
});
// 验证不通过,显示出错信息, 并中止提交操作!
var transport = request.transport;
if (transport.responseText != ""){
Validation.get(validatorName).error = transport.responseText;
[validatorName].all(Validation.test.bind($("errMsg")));
Event.stop(ev);
}
}
})
}

应用三:
需求:典型注册应用, 密码和确认密码的一致性验证

html代码:

<form method=post action="" id = "frmRegister">
<table align = "center" style = "height:100%">
<tr>
<td>
<fieldset style = "padding:10px">
<legend>Register</legend>
<table>
<tr>
<td class = "label"><span class = "requiredFlag">*</span>SAP ID</td>
<td><input type="text" name="sapId" id = "sapId" class = "required"></td>
</tr>
<tr>
<td class = "label"><span class = "requiredFlag">*</span>Password</td>
<td><input type="password" name="password" id="password" class = "required"></td>
</tr>
<tr>
<td class = "label"><span class = "requiredFlag">*</span>Re-Password</td>
<td><input type="password" name="repassword" id="repassword" class = "validate-identical"></td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" class = "submit" value = "Register"></td>
</tr>
</table>
</fieldset>
</td>
</tr>
</table>
</form>

javascript脚本:

window.onload = function(){
// 添加password一致性验证
Validation.add("validate-identical", "the value of password and repassword must be identical", function(v){
return !Validation.get('IsEmpty').test(v) && v == $F("password");
})

// 验证器注册
var validator = new Validation('frmRegister', {stopOnFirst:true, immediate:true});
}