tap2008 发表于 2013-2-6 08:46:57

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]
查看完整版本: validation_cn.js验证的效果