APMの家

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://chaochao.blogbus.com/logs/5732350.html

最近对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">*SAP ID</td> 
                            <td><input type="text" name="sapId" id = "sapId" class = "required"></td> 
                        </tr> 
                        <tr> 
                            <td class = "label">*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">*SAP ID</td> 
                            <td><input type="text" name="sapId" id = "sapId" class = "required"></td> 
                        </tr> 
                        <tr> 
                            <td class = "label">*Password</td> 
                            <td><input type="password" name="password" id="password" class = "required"></td> 
                        </tr> 
                        <tr> 
                            <td class = "label">*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}); 
}