學習了下 rapid-validation,發現這個驗證框架是個好東西,也支持tooltip,一些基本的表單驗證都有了.
但如果遇到複雜的業務規則就必須自定義驗證來解決,rapid-validation有寫自定義驗證的地方,但自己寫的一般性驗證效果都是alert()彈出式,不是tooltip那種效果,爲了達到統一融合,就實現了所謂的自定義驗證。
<script> var globle_flag=0;//全局變量,用來標記是否已經驗證完自定義的。 new Validation(document.forms[0],{onSubmit:true,onFormValidate : function(result,form) { var finalResult = result; //在這裏添加自定義驗證 if(globle_flag == 1){//如果已經驗證完自定義的,且rapid-Validation也已經驗證完,就提交。 return disableSubmit(finalResult,'submitButton'); } }}); //點擊“提交”時調用此方法 function sub(){ globle_flag=0; var elm = $prototype("username"); var uname=elm.value; if(uname != "aaa"){ showErorMsg("username","名字不是aaa,請重新輸入!"); return false; }else{ globle_flag=1; hideErrMsg("username"); } } //將錯誤信息顯示到tooltip function showErorMsg(elm,errorMsg) { var elm = $prototype(elm); if(typeof Tooltip != 'undefined') { if (!elm.tooltip) { elm.tooltip = new Tooltip(elm, {backgroundColor:"#FC9", borderColor:"#C96", textColor:"#000", textShadowColor:"#FFF"}); } elm.tooltip.content = errorMsg; } elm.style.border="3px solid #FF0000"; } //隱藏tooltip function hideErrMsg(elm) { var elm = $prototype(elm); if(typeof Tooltip != 'undefined') { if (elm.tooltip) { elm.tooltip.stop(); elm.tooltip = false; } } elm.style.border="1px solid #00CC00"; elm.style.color="#000"; } </script>