`
flustar
  • 浏览: 96592 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

用prototype实现前台表单的验证(无刷新验证用户名,email,验证码等)

阅读更多
最近发现使用prototype来做表单的前台验证感觉非常不错,prototype.js 是由 Sam Stephenson 写的一个 javascript 类库。这个构思奇妙,而且兼容标准的类库,能帮助你轻松建立有高度互动的 Web 2.0 特性的富客户端页面。下面是一个使用它做前台表单验证的例子。

var flag=[true,true,true,true,true,true,true,true,true,true];
       var userNameInfo=["用户名不能为空","用户名必须为6~20位","用户已存在","恭喜用户名可以使用"];
       var passwordInfo=["密码不能为空","密码长度不能小于6位","请再次输入密码","两次密码输入不一致,请重新输入"];
       function changeImage()
    {
    var timenow=new Date().getTime();
          $('checkcode').src="image/loading.gif";
          $('checkcode').src="random.jsp?d="+timenow;
       }
       function checkUserName()
    {
    if ($F("userName").match(/^\s*$/g)) {
           $("userNameErr").innerHTML =userNameInfo[0];
     flag[0]=false;
      }else{
  
    var re=/^(\w){6,20}$/;
    var tt = re.test($F("userName"));
    if(tt==false){
   $("userNameErr").innerHTML = userNameInfo[1];
   flag[0]=false;
       }else{
     $("userNameErr").innerHTML = "<img src='image/loading.gif'>";
       isExsitUsername(); 
   }
    }
   }
    function checkPassword()
    {
     
    if ($F("password").match(/^\s*$/g)) {
           $("pwdErr").innerHTML =passwordInfo[0];
           flag[1]=false;
  }else if($F("password").length<6){
      $("pwdErr").innerHTML=passwordInfo[1];
      flag[1]=false;
  }else{
      $("pwdErr").innerHTML="";
      flag[1]=true;
  }
  
    }
    function checkRePassword(){
      if ($F("password2").match(/^\s*$/g)) {
          $("repwdErr").innerHTML =passwordInfo[2];
          flag[2]=false;
  }else if($F("password2")!=$F("password")){
   $("repwdErr").innerHTML=passwordInfo[3]; 
   flag[2]=false; 
   }else{
      $("repwdErr").innerHTML="";
      flag[2]=true;
   }
    }
    function checkName(){
       if($F("name").match(/^\s*$/g)){
      $("nameErr").innerHTML="昵称不能为空";
      flag[3]=false;
    }else{
     $("nameErr").innerHTML="";
     flag[3]=true;
    }
    }
    function checkQuestion(){
       if($F("question").match(/^\s*$/g)){
          $("questionErr").innerHTML="请选择一个安全问题";
          flag[4]=false;
       }else{
          $("questionErr").innerHTML="";
          flag[4]=true;
       }
    }
    function checkAnswer(){
      if($F("answer").match(/^\s*$/g)){
         $("answerErr").innerHTML="安全回答不能为空";
         flag[5]=false;
      }else if($F("answer").length<4){
         $("answerErr").innerHTML="安全回答问题不能少于4个字符";
         flag[5]=false;
      }else{
          $("answerErr").innerHTML="";
         flag[5]=true;
      }
    }
    function checkEmail()
    {
     var reEmail =/(\S)+[@]{1}(\S)+[.]{1}(\w)+/;
      if($F("email").match(/^\s*$/g)){
         $("emailErr").innerHTML="Email不能为空";
         flag[6]=false;
      }else{
           var temp=reEmail.test($("email").value);
           if(temp==false){
             $("emailErr").innerHTML= "Email必须符合要求!";
                flag[6]=false;
              }else{
                $("emailErr").innerHTML="<img src='image/loading.gif'>";
                             isExsitEmail();
             
              }
         }

    }
    function checkMobile(){
    var patrn=/^(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})$/;
    if($F("mobile").match(/^\s*$/g)){
         $("mobileErr").innerHTML="";
      flag[7]=true;
    }else{
      if (!patrn.test($F("mobile"))) {
         $("mobileErr").innerHTML="请输入正确的手机号码";
         flag[7]=false;
      }else{
        $("mobileErr").innerHTML="";
        flag[7]=true;
      }
      
    }  
      
   }
   function checkPID(){
     var patrn=/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/;
     if($F("PID").match(/^\s*$/g)){
       $("PIDErr").innerHTML="";
       flag[8]=true;
     }else{
      if (!patrn.test($F("PID")))  
         {
         $("PIDErr").innerHTML="身份证号码有误!";
         flag[8]=false;
      }else{
       $("PIDErr").innerHTML="";
       flag[8]=true;
    }
   }
       
    }
   
  function isExsitUsername(){
     var username=$F("userName");
     var url='user_checkUsername.do';
     var pars="username="+username;
     var usernameAjax=new Ajax.Request(
       url,
       {method:'get',parameters:pars,onComplete:showUResult}
       );
  }
  function showUResult(result){
  
       if(result.responseText.indexOf("true")!=-1){
          
          $("userNameErr").innerHTML=userNameInfo[2];
          flag[0]=false;
       }else{
          $("userNameErr").innerHTML="<font color='green'>"+userNameInfo[3]+"</font>";
          flag[0]=true;
       }
  }
  function isExsitEmail(){
     var email=$F("email");
     var url='user_checkEmail.do';
     pars="email="+email;
     var emailAjax=new Ajax.Request(
        url,
        {method:'get',parameters:pars,onComplete:showEResult}
        );
  }
  function showEResult(result){
   if(result.responseText.indexOf("true")!=-1){
       $("emailErr").innerHTML="这个Email已经有人使用,请换一个";
       flag[6]=false;
   }else{
       $("emailErr").innerHTML="<font color='green'>已通过验证</font>";
       flag[6]=true;
   }
  }
  function checkCode(){
      if($("code").value.match(/^\s*$/g)){
         $("codeErr").innerHTML="验证码不能为空";
         flag[9]=false;
    }else{
      isCorrectCode();
    }
    }
  function isCorrectCode(){
     var code=$F("code");
     var url='checkcode.jsp';
     pars="code="+code+"&ram="+Math.random();
     var codeAjax=new Ajax.Request(
     url,
     {method:'get',parameters:pars,asynchronous:false,onComplete:showCResult}
     );
    
  }
  function showCResult(result){
     if(result.responseText.indexOf("validate_successful")!=-1){
       $("codeErr").innerHTML="";
       flag[9]=true;
     }else{
       $("codeErr").innerHTML="错误的验证码";
       flag[9]=false;
     }
  }
 function checkform(){
      checkUserName();
      checkPassword();
      checkRePassword();
      checkName();
      checkQuestion();
      checkAnswer();
      checkEmail();
      checkMobile();
      checkPID();
      checkCode();
      for(var i=0;i<flag.length;i+=1){
        if(flag[i]==false)
          return false;
     }
     return true;
     
   }
其中

$(): 函数是在 DOM 中使用过于频繁的 document.getElementById() 方法的一个便利的简写,就像这个 DOM 方法一样,这个方法返回参数传入的 id 的那个元素。
$F() :函数是另一个大收欢迎的“快捷键”,它能用于返回任何表单输入控件的值,比如文本框或者下拉列表。这个方法也能用元素 id 或元素本身做为参数。
Ajax.Request 类:如果你不使用任何的帮助程序包,你很可能编写了整个大量的代码来创建 XMLHttpRequest 对象并且异步的跟踪它的进程,然后解析响应并处理它。当你不需要支持多于一种类型的浏览器时你会感到非常的幸运,反之你就要考虑使用prototype的Ajax.Request类。你也许注意到了在使用它做无刷新验证用户名,Email以及验证码时,使用'get'方法把参数传递给url,后面都带有一个参数,这个参数值是当前系统时间或是一个随机参数的一个数,这样做是为了避免浏览器的从它的缓存中读取响应信息,影响结果的正确性。

 

分享到:
评论
1 楼 elvishehai 2008-11-19  
学习中``````````````

相关推荐

    prototype整合json实现无刷新验证用户名

    在Web开发中,为了提供更好的用户体验,我们常常需要实现无刷新验证功能,即在用户输入信息时即时检查数据的有效性,而无需提交整个表单。本教程将关注如何使用JavaScript库Prototype结合JSON(JavaScript Object ...

    基于Prototype的Validation表单验证插件.rar

    一款基于Prototype的Validation表单验证插件,实现Ajax风格的无刷新表单验证功能,当用户输入完表单,即时显示该项输入是否正确,不正确则会给出提示,适合那些比较喜欢简洁风格,又要求功能准确的用户,本款表单...

    漂亮表单验证和密码强度的验证

    前端验证通常使用JavaScript或者jQuery等库,如提供的`prototype_1.7_rc2.js`可能就是用来增强HTML表单验证功能的。前端验证的优点在于可以实时反馈错误,提高用户体验,但缺点是容易被绕过,所以后端验证同样必不可...

    ASP基于Prototype的Ajax无刷新登录实例

    在本实例中,Prototype的主要作用是实现无刷新的Ajax通信,即在用户填写登录信息并提交后,后台验证用户身份,无需整个页面刷新,仅更新登录状态部分。 Ajax(Asynchronous JavaScript and XML)的核心是通过...

    表单验证类 基于prototype的validation.js

    `validation.js`是一个专门用于前端表单验证的库,它基于Prototype JavaScript框架构建,提供了一种简单且灵活的方式来实现这一功能。 **Prototype框架** 是一个广泛使用的JavaScript库,它扩展了JavaScript语言的...

    asp ajax 无刷新用户登录带库和程序测试通过(prototype)

    标题 "asp ajax 无刷新用户登录带库和程序测试通过(prototype)" 涉及的是使用ASP(Active Server Pages)技术与AJAX(Asynchronous JavaScript and XML)结合,通过Prototype JavaScript框架实现的一个无刷新用户...

    Ajax最全页面验证-基本prototype框架

    本文将深入探讨Ajax在表单验证中的应用,特别是基于Prototype框架的实现方式,以及动态验证的重要性。 一、Ajax基础 Ajax的核心是通过JavaScript与服务器进行异步通信,无需刷新整个页面就能获取或更新数据。它由...

    javascript表单验证类

    下面将详细讨论JavaScript表单验证类的关键知识点及其实现方式。 一、表单验证的重要性 在Web应用中,表单验证是不可或缺的,因为它可以: 1. 提高用户体验:即时反馈错误,让用户在提交前就知晓问题所在,避免多...

    ASP源码—基于Prototype的Ajax无刷新登录实例.zip

    ASP源码—基于Prototype的Ajax无刷新登录实例.zip是一个压缩包,其中包含了使用ASP(Active Server Pages)技术构建的一个无刷新登录系统。该系统利用了Ajax(Asynchronous JavaScript and XML)技术,通过...

    Extjs验证表单 Extjs验证表单

    ### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来帮助开发者轻松实现客户端验证。本文将深入探讨Extjs中的...

    Ajax表单验证

    在"Ajax最全页面验证-基本prototype框架.rar"这个压缩包中,可能包含了使用Prototype库实现Ajax表单验证的示例代码和详细教程。解压后,你可以学习如何集成Prototype与Ajax来创建高效、用户友好的表单验证系统。这个...

    最简单的表单验证框架发布

    在网页开发中,表单验证是确保用户输入数据有效性和安全性的关键步骤。这个框架可能简化了常见的验证规则,使得开发者可以快速集成到自己的项目中。 描述中的“增加一个helloworld的演示”意味着提供了基础的示例...

    基于ASP的基于Prototype的Ajax无刷新登录实例.zip

    学习这个实例,开发者可以了解到如何在ASP中集成Ajax,如何使用Prototype进行DOM操作,以及如何设计和实现无刷新登录的前端交互逻辑。此外,实例可能还包括了数据验证、错误处理和安全方面的考虑,这些都是实现登录...

    基于prototype的表单验证框架rapid-validation-v1.0

    简洁,快速的验证语法 无需编写验证提示信息(当然也支持自定义提示信息) 错误消息在指定地方显示 支持组合验证 Ajax支持 基于prototype.js 支持国际化 易于扩展 基于标准的Html属性...

    ASP实例开发源码—ASP基于Prototype的Ajax无刷新登录实例.zip

    这个实例“ASP基于Prototype的Ajax无刷新登录实例”是关于如何在ASP中利用Ajax技术实现用户登录功能,无需页面刷新即可完成交互。Ajax(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下更新...

    Ajax无刷新登陆实例代码

    在无刷新登录的实现中,prototype.js提供了创建和管理XMLHttpRequest对象的方法,以及方便的DOM操作接口。通过使用prototype.js,开发者可以更简洁地编写Ajax请求,处理响应,并更新页面元素以显示登录状态。 具体...

    prototype -通过js提交表单,局部刷新不跳转

    在本话题中,我们关注的是如何使用Prototype库来实现表单的提交,从而达到局部刷新的效果,而不是整个页面的跳转。 Prototype的核心特性之一是其强大的`Form`对象。在传统的HTML表单提交中,当用户点击提交按钮时...

    用prototype实现页面自动提交

    标题中的“用prototype实现页面自动提交”指的是在Web开发中使用Prototype JavaScript库来自动化表单的提交过程。Prototype是一个强大的JavaScript框架,它提供了一系列的工具和方法,简化了DOM操作,事件处理,Ajax...

    validform表单验证

    ValidForm是一款强大的JavaScript表单验证插件,专为前端开发者设计,用于实现高效、便捷的表单数据验证。它的核心功能在于提供了一种简洁的方法,让开发者能够在用户提交表单前,对输入的数据进行实时检查,确保...

    【JS相关插件】 强大的表单验证插件VanadiumJS

    **VanadiumJS:一个强大的JavaScript表单验证插件** 在前端开发中,用户输入的数据验证是必不可少的一个环节,它能够确保用户提交的信息符合预设的规范,提高网站数据的准确性和安全性。VanadiumJS就是这样一款专门...

Global site tag (gtag.js) - Google Analytics