修改后的prototype.js增加进度条和验证输入框

2016-02-19 15:20 7 1 收藏

下面这个修改后的prototype.js增加进度条和验证输入框教程由图老师小编精心推荐选出,过程简单易学超容易上手,喜欢就要赶紧get起来哦!

【 tulaoshi.com - Web开发 】

使用示例
script type="text/javascript" src="../scripts/prototype.js"/script
script type="text/javascript"
var progressBar;
/**//*
* 功能:admin登录
*/
function UserLogin()
{
   
    //验证页面控件
    var checkform = new CheckForm();
    if(!checkform.checkForm(document.getElementById(''formLogin''))) return false;   
       
    //开始提交数据
    progressBar = new ProgressBar();
    progressBar.SetStatus("正在发送数据到服务器.");
   
    var url = "../admin.do";
    var pars = "action=Login&username=" + $F(''username'') + "&password=" + $F(''password'') + "&rnd=" +$F(''rnd'');
    var myAjax = new Ajax.Request(
    url,
    {method: ''post'', parameters: pars, onComplete: UserLogin_CallBack}
    );
}
/**//*
* 功能:admin登录 - CallBack
*/
function UserLogin_CallBack(originalRequest)
{
  var objXml = originalRequest.responseXML;
  //alert(originalRequest.responseTEXT);
  try
  {
    if(objXml.getElementsByTagName("return")[0].firstChild.nodeValue == "true")
    {
      progressBar.isNeedConfirmButton = false;
      progressBar.isNeedProgressBar = true;
      progressBar.SetStatus("img src=''../images/error.gif'' align=''absmiddle'' 登录成功,正在载入,请稍候..");

      //login success
      location.href=''admin_index.htm'';
    }
    else
    {
      progressBar.isNeedConfirmButton = true;
      progressBar.isNeedProgressBar = false;
      progressBar.focusItem = "username";
      progressBar.SetStatus("img src=''../images/error.gif'' align=''absmiddle'' 对不起,登录失败!" + objXml.getElementsByTagName("msg")[0].firstChild.nodeValue);

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

      $(''btnOK'').disabled = false;
    }
  }
    catch(err)
    {
      progressBar.isNeedConfirmButton = true;
      progressBar.isNeedProgressBar = false;
      progressBar.focusItem = "username";
      progressBar.SetStatus("img src=''../images/error.gif'' align=''absmiddle'' 对不起,登录失败!" + err.message);

      $(''btnOK'').disabled = false;
    }
  }
/script

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

table width="100%" border="0" cellpadding="3" cellspacing="0"
              tr
                td colspan="3" height="30"/td
              /tr
              tr
                td width="21%"用户名:/td
                td colspan="2"
                  input type="text" tabindex="1" id="username" name="username" chname="用户名" notempty="true" size="20" style="width:180px;" //td
              /tr
              tr
                td密 码:/td
                td colspan="2"input type="password" tabindex="2" id="password" name="password" chname="密码" notempty="true" size="20" style="width:180px;" //td
              /tr
              tr
                td验证码:/td
                td colspan="2"
                  input type="text" style="width:120px;" id="rnd" tabindex="3" chname="验证码" class="input_1" notempty="true" onKeyUp="value=value.replace(/[^d]/g,'''')"/
                  img alt="验证码" src="../rnd.do?type=admin_rnd" border="0" usemap="absmiddle"//td
              /tr             
                tr
                  td class="white" /td
                  td width="22%"input type="submit" Class="input_1" id="btnOK" value="登 录" tabindex="4"/td
                    td width="57%"input type="reset" Class="input_1" value="重 置"/td
                /tr
                tr
                  td colspan="3" height="2"/td
                /tr
                tr
                  td colspan="3"/td
                /tr
        /table

来源:http://www.tulaoshi.com/n/20160219/1609430.html

延伸阅读
标签: Web开发
第一种方式,函数式: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"       html xmlns="http://www.w3.org/1999/xhtml"       head       meta http-equiv="Con...
标签: flash教程
1。首先在场景上画上一个长条状的进度条 2。选取这个进度条之后按 F8 把它转换成Movieclip影片,记得“注册点”必须在左边 3。转换成影片之后设定实例名 loader ,再来编辑这个影片 4。制作100个帧的的进度,然后增加一个图层并增加一个停止播放的指令 5。回到场景,在第一帧输入以下代码 6。在第二帧开始加入你们的...
《无尽的进度条Progress Quest》部分法术效果攻略 提示1:《无尽的进度条》 为半即时回合制游戏,即那种战斗开始后敌我都有行动条,走到头才能行动的回合制。 瞬移:有一定几率让你无视速度,立刻行动,几率随法术等级上升。 兔子的正义铁拳:召...
标签: Web开发
今天有人问我,163邮箱那样的Javascript加载进度条是如何实现的。 我不知道,不过实现一个不难,因为script /有onload和onreadystatechange。还有就是,我们有Atlas。 Atlas中有个类:Sys.ScriptLoader,它的作用就是在页面中依次地加载多个Script文件。在实现之前,先来分析一下这个类的代码。     1Sys.Sc...
标签: Web开发
首先下载prototype.js这个类包,然后包含在你的html页面中 script src='prototype.js'/script 创建XMLHttpRequest对象并且异步的跟踪它的进程, 然后解析出响应 然后处理它可能这是ajax的根本意义,它最具威力的地方,但你能出兼容各种不同浏览器的代码,可能会令你痛苦不堪,但幸好救苦救难的prototype.js提供Ajax.Request ...

经验教程

968

收藏

84
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部