JavaScriptベリファイア

このjsスクリプトは、汎用的な検証フレームワーク、具体的な検証ルール、および検証に合格できないときに発生する動作を完全にカスタマイズすることができます.
まず、検証が必要なフォーム(Form)の検証器を追加する必要があるinputコントロールに一定の検証ルールを追加します.この例では、Inputコントロールにカスタム属性を追加することで実現されます.次の例では、次のようにします.

<script src="validate.js" ></script>  
<style>  
    input.invalid{background: #faa;}  
    input.valid{background: #afa;}    
</style>  
  
<form>  
    name : <input type="text" name="name" required><br>  
    email: <input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$"><br>  
    zipcode : <input type="text" name="zipcode" pattern="^\s*\d{5}\s*$"><br>  
    unvalidate : <input type="text"><br>  
      
    <input type="submit" value="submit query">  
</form>  

requiredやpatternを見たとき、この2つの属性はカスタマイズされているので、自分が浅いと嘆かないでください.これによりjsスクリプトとhtmlの分離が実現される.以下はこの牛BのJavaScriptスクリプトです.

(  
function(){  
    if(window.addEventListener) window.addEventListener("load", init, false);  
    else if(window.attachEvent) window.attachEvent("onload", init);  
          
    function init(){  
        for(var i = 0;i < document.forms.length;i++){  
            var f = document.forms[i];  
            var needsValidation = false;  
            for(var j = 0;j < f.elements.length; j++){  
                var e = f.elements[j];  
                if(e.type != "text") continue;  
                var pattern = e.getAttribute("pattern");  
                var required = e.getAttribute("required") != null;  
                  
                if(required && !pattern){  
                    pattern = "\\S";  
                    e.setAttribute("pattern", pattern);   
                }     
                  
                if(pattern){  
                    e.onchange = validateOnChange;  
                    needsValidation = true;  
                }  
            }  
            if(needsValidation) f.onsubmit = validateOnSubmit;    
        }  
    }  
      
    function validateOnChange(){  
        var textfield = this;  
        var pattern = textfield.getAttribute("pattern");  
        var value = this.value;  
          
        if(value.search(pattern) == -1) textfield.className = "invalid";  
        else textfield.className = "valid";   
    }  
      
    function validateOnSubmit(){  
        var invalid = false;  
        for(var i = 0; i < this.elements.length;i++){  
            var e = this.elements[i];  
            if(e.type == "text" && e.onchange == validateOnChange){  
                e.onchange();     
                if(e.className == "invalid") invalid = true;  
            }  
        }  
        if(invalid){  
            alert(  "The form is incompletely or incorrectly filled out.
"+  
                    "Please correct the hightlighted fields and try again.");  
            return false;  
        }     
    }     
}  
)();  

テーマのアイデアは、まず合法的で不法な場合に行うべき動作を定義し(この例では、inputボックスの背景色を簡単に変更するだけで、これはCSSで簡単に実現でき、警告などをポップアップしてユーザーに提示することもできます)、そして、ボックスの内容が変更された場合、このinput定義のモード(もしあれば)、一致しない場合、一定の方法でユーザーに注意します.
検証器全体の構想は非常に明確で、コードも簡潔で、主にカスタムルールを通じて任意の検証方式を完成することができます.