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

关注

原创最新推荐文章于 2026-09-20 12:43:44 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

前端表单验证的五阶段演进：从面条代码到可配置体系表单验证是前端开发中最基础也最易被低估的核心能力，其本质是将业务规则转化为可执行、可测试、可维护的客户端约束逻辑。从原始的if-else校验，到正则匹配、函数封装、链式编排、DOM属性驱动，最终走向数据驱动的可配置验证体系，这一过程深刻体现了前端工程化演进的典型路径。其中，可维护性与可配置性成为支撑多语言、灰度发布、快速迭代的关键技术价值。在电商、金融、ERP等复杂表单场景中，合理的验证架构不仅能提升用户填写体验与提交成功率，更能显著降低跨角色协作成本——本文聚焦于真实项目中沉淀出的五阶段实践模型，涵盖配置阅读详情

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

    }
    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，后面都带有一个参数，这个参数值是当前系统时间或是一个随机参数的一个数，这样做是为了避免浏览器的从它的缓存中读取响应信息，影响结果的正确性。