教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 javascript实现自动验证表单的代码分享

javascript实现自动验证表单的代码分享

发布时间:2014-12-23   编辑:jiaochengji.com
本文介绍下,用javascript实现自动验证表单内容的一段代码,有需要的朋友参考下。

1,js代码部分

复制代码 代码示例:

<script>
/**
* 自动验证表单
* edit by www.jiaochengji.com
*/
(function(){
 if(window.addEventListener) window.addEventListener("load",init,false);
 else if(window.attachEvent) window.attachEvent("onload",inint);

 function init()
 {
  for (var i=0;i<document.forms.length ;i++ )//页面中所有表单
  {
   var f=document.forms[i];
             var needValidate = false;//是否需要验证
   for(var j=0;j<f.elements.length;j++)//表单中所有元素
   {
              var e=f.elements[j];
     if(e.type!="text") continue;

     var pattern=e.getAttribute("pattern");//获取正则
              var required=e.getAttribute("required")!=null;//是否是必须
   
     if(required && !pattern)
    {
      pattern='\\S';
      e.setAttribute("pattern",pattern);
    }
    else{
     e.onchange=validateOnChange;
     needValidate=true;
    }
        }
    }
  if(needValidate) f.onsubmit=validateOnSubmit;
  }
  function validateOnChange()
  {
    var textfield=this;
    var pattern=textfield.getAttribute("pattern");
    var value=this.value;

    if(value.search(pattern)== -1) textfield.className="invalid";
    else textfield.className="valid";
  }

  function validateOnSubmit()
     {
   var invalid=false;
   for(var i=0;i<this.elements.length;i++)
   {
    var e=this.elements[i];
    if(e.type="text" && e.onchange == validateOnChange)
    {
     e.onchange();
     if(e.className=="invalid") invalid=true;
    }
   }
   if(invalid){
    alert ("呵呵,有错误,请认真核对");
    return false;
   }
  }
})();
<script>

2,在页面中调用:

复制代码 代码示例:
<!--引入js文件-->
<script language="javascript" src="validate.js"></script>
<!--form表单-->
<form>
name:<input type="text" name="name" required><br>
email:<input type="text" name="email" pattern="^s*\w+@\w+\.\w+\s*$"><br>
<input type="submit" value="submit">
</form>

您可能感兴趣的文章:
php验证码大全(实例分享)
php彩色验证码的简单例子
php验证码的三个实例代码分享
php点击验证码实时刷新的实现代码
常用js验证代码大全(Email、手机号码、身份证号码、文件类型等)
php5验证码类(简易实用型)
表单验证插件 jQuery formValidator
php图片验证码的例子
php验证码简单函数代码(附效果图)
php各种验证码与Ajax验证的实例分享

关键词: js提交表单  表单提交  表单验证   
[关闭]
~ ~