validation_cn.js验证的效果
想使用validation_cn.js做一个javaeye提交的效果,现在终于做出来了,与大家分享。不好意思,上次的版本不能使用,是因为vaidation_cn.js引起file文件的问题,上次我是jsp做的,好像可以,html的话,去掉file既可以了,源代码请见附件。附代码如下:
<html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script src="js/prototype.js" type="text/javascript"></script> <!-- 动态效果的js --> <script src="js/effects.js" type="text/javascript"></script> <script src="js/validation_cn_cust.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="css/style_min.css" /> <style> body td { color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; } .validation-advice { margin: 5px 0; padding: 5px; background-color: #DFF3FB; color : #FF3300; font-weight: bold; } </style> <script type="text/javascript"> function window_onload() { //表单的第一个元素获得焦点 Form.focusFirstElement("form1"); } </script> </head> <body > <div align="center"> <form id="form1" name="form1" method="post"> <br><input name="a" class="required"><br> <input name="b" class="required"><br> <input name="c" class="required"><br> <input name="d" class="required"><br><br> <div id="commit" style="display:block"> <input type="button" name="Submit" value="提交" > <input type="button" name="btn2" value="重置" > <input id="btn3" type="button" name="btn3" value="取消" > </div> <div id="commiting" style="display:none"><img src="images/loading.gif">正在提交...</div> </form> </div> </body> <script type="text/javascript"> var validation = new Validation("form1",{immediate:true,useTitles:true,stopOnFirst:false}); function checkSubmit() { var f = $("form1"); //自动验证,手动提交 if(validation.validate()) { alert("成功!"); //form.Submit.disabled = true; $("commiting").style.display = "block"; $("commit").style.display = "none"; //alert($("commit").value)//; = "<img src="images/loading.gif">正在提交..."; //alert($("commit").innerHTML); //$("commit").innerHTML = '<img src="images/loading.gif">正在提交...'; f.action = "http://blog.donews.com/limodou/archive/2005/06/21/439285.aspx"; f.submit(); } else { //form.Submit.disabled = false; //$("commiting").style.display = "none"; } } </script></html>
在onclick的时候,进行验证,避免重复点击提交按钮,进入等待状态。
页:
[1]