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

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

最近对prototype.js用的比较多,同时发现了一个基于prototype.js的验证框架: [url＝http://tetlaw.id.au/view/blog/really-easy-field-validation-with-prototype]validation.js really easy field validation with prototype[/url],下面是我在开发中用到的三个例子.
前提条件:
首先要在html页面中引入几个js

Html代码

< 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

Html代码

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});   
}   

转自： http://www.javaeye.com/topic/155337