求各位大侠了。。javascript 权威指南18-3 表单验证？validate 但是第一个文本框无法输入正确格式 求指正

第一个文本框的输入格式 怎么填都不对<!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="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style >
input.invalid { background-color:#fa0;}
</style>
</head><body>
<form>
Name:<input type="text" name="name" required  /><br />
email:<input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$" /><br />
zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" /><br>
unvalidated:<input type="text"  /><br />
<input type="submit" />
</form>
<script>
(function()/*匿名函数的作用，为什么权威指南的工具函数都用匿名函数*/{
       if(window.addEventListener) window.addEventListener("load",init,false);
   else if(window.attachEvent) window.attachEvent("onload",init);
   
  function init(){
   for(var i=0;i<document.forms.length;i++)
   {
       var f=document.forms[i];//第i个form
   var needValidation = false;// Assume ,for now,that this form does not need any validation
   
   for(var j=0;j<f.elements.length;j++)
   {
       e = f.elements[j];
   
   if(e.type!="text") continue;
   //
   var pattern = e.getAttribute("pattern");
   var required = e.getAttribute("required")!=null;
   //See if it has attribute that require validation
   if(required&&!pattern){
   pattern = "^\s*\d{5}\s*$"; //"\\s"是什么意思？应该是不让带required的textfield 为空 此时的pattern是不存在的 只是不为空就可以了
   e.setAttribute("pattern",pattern);
   }//////////////////////////这里的正则表达式和zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" /><br>一样为什么还是不行恩？？？？？？？？？？？？？？    if(e.pattern){
   e.onchange = validateOnChange;
   
   needsValidation = true;
   }
      }
   if(needValidation) f.onsubmit = validateOnSubmit;
}
}
  function validateOnChange()
{   var textfield = this;
    var pattern = textfield.getAttribute("pattern");
var value = textfield/*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();//e.onchange();是一个函数 应该这样调用
    if(e.classname == "invalid") invalid = true;
   }
}
if(invalid){
 alert("The form is incompletely or incorrectly filled out.\n "+"Please correct the highlighted field and try again");
 return false;
}
}
})();
      
   
       
</script>
</body>
</html>

解决方案 »

  1.   

    这代码有问题的啊，后两个函数没有执行的， if(e.pattern) 要改为if(e.getAttribute("pattern"))；另外这个赋值应该也不对e.onchange = validateOnChange;关于正则\s空白字符，\S非空白字符
      

  2.   

    <!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="Content-Type" content="text/html; charset=gb2312" />
    <title>Untitled Document</title>
    <style >
    .invalid { background-color:#fa0;}
    </style>
    </head><body>
    <form>
    Name:<input type="text" name="name" required  /><br />
    email:<input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$" /><br />
    zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" /><br>
    unvalidated:<input type="text"  /><br />
    <input type="submit" />
    </form>
    <script>
    (function()/*匿名函数的作用，为什么权威指南的工具函数都用匿名函数*/{
           if(window.addEventListener) window.addEventListener("load",init,false);
           else if(window.attachEvent) window.attachEvent("onload",init);
           
          function init(){
           for(var i=0;i<document.forms.length;i++)
           {
               var f=document.forms[i];//第i个form
               var needValidation = false;// Assume ,for now,that this form does not need any validation
               
               for(var j=0;j<f.elements.length;j++)
               {
                   e = f.elements[j];
                   
                   if(e.type!="text") continue;
                   //
                   var pattern = e.getAttribute("pattern");
                   var required = e.getAttribute("required")!=null;
                   //See if it has attribute that require validation
                   if(required&&!pattern){
                   pattern = "^\\s*\\d{5}\\s*$"; //"\\s"是什么意思？应该是不让带required的textfield 为空 此时的pattern是不存在的 只是不为空就可以了
                   e.setAttribute("pattern",pattern);
                   }//////////////////////////这里的正则表达式和zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" /><br>一样为什么还是不行恩？？？？？？？？？？？？？？               if(e.pattern){
                   e.onchange = validateOnChange;
                   
                   needsValidation = true;
                   }
              }
           if(needValidation) f.onsubmit = validateOnSubmit;
            }
            }
          function validateOnChange()
            {   var textfield = this;
                var pattern = textfield.getAttribute("pattern");
                var value = textfield.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();//e.onchange();是一个函数 应该这样调用
                        if(e.classname == "invalid") invalid = true;
                       }
                    }
                if(invalid){
                 alert("The form is incompletely or incorrectly filled out.\n "+"Please correct the highlighted field and try again");
                 return false;
                }
            }
    })();        
                      
                   
                   
    </script>
    </body>
    </html>
      

  3.   

    你的代码是你自己写的还是抄的书，里面错误不少，下面的代码可以初步完成需要的逻辑，细节方面还要再推敲下，主要修改了后两个函数的参数，this在后面两个函数都是指的window，所以不可以用，改为传参数，另外注意onchange的大小写，全小写才可以<!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="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style >
    input.invalid { background-color:#fa0;}
    </style>
    </head><body>
    <form action="test.asp">
    Name:<input type="text" name="name" required  /><br />
    email:<input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$" /><br />
    zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" /><br>
    unvalidated:<input type="text" onchange='alert("test")' /><br />
    <input type="submit" />
    </form>
    <script>
    (function()/*匿名函数的作用，为什么权威指南的工具函数都用匿名函数*/{
           if(window.addEventListener) window.addEventListener("load",init,false);
           else if(window.attachEvent) window.attachEvent("onload",init);
           
          function init(){
           for(var i=0;i<document.forms.length;i++)
           {
               var f=document.forms[i];//第i个form
               var needValidation = false;// Assume ,for now,that this form does not need any validation
               
               for(var j=0;j<f.elements.length;j++)
               {
                   e = f.elements[j];
                   
                   if(e.type!="text") continue;
                   //
                   var pattern = e.getAttribute("pattern");
                   var required = e.getAttribute("required")!=null;
                   //See if it has attribute that require validation
                   if(required&&!pattern){
                   pattern = "^\s*\d{5}\s*$"; //"\\s"是什么意思？应该是不让带required的textfield 为空 此时的pattern是不存在的 只是不为空就可以了
                   e.setAttribute("pattern",pattern);
                   }//////////////////////////这里的正则表达式和zipcode:<input type="text" name="zip" pattern = "^\s*\d{5}\s*$" /><br>一样为什么还是不行恩？？？？？？？？？？？？？？
                   if(e.getAttribute("pattern")){
                   e.onchange=function(){validateOnChange(e);};
                   
                   needsValidation = true;
                   }
              }
           if(needsValidation) f.onsubmit = function(){return validateOnSubmit(f);};        }
            }
          function validateOnChange(obj)
            {   var textfield = obj;
                var pattern = textfield.getAttribute("pattern");
                var value = textfield.value;
                
                if(value.search(pattern)==-1) textfield.classname = "invalid";
                else textfield.classname = "valid";
            }
          function validateOnSubmit(form)
            {
                var invalid = false;
                for(var i=0;i<form.elements.length;i++)
                   {
                      var e = form.elements[i];
                      //接下来的是调用了
                      //if(e.type =="text" && e.onchange == validateOnChange){
                      //  e.onchange();//e.onchange();是一个函数 应该这样调用
                        if(e.classname == "invalid") invalid = true;
                      // }
                    }
                if(invalid){
                 alert("The form is incompletely or incorrectly filled out.\n "+"Please correct the highlighted field and try again");
                 return false;
                }
            }
    })();        
                      
                 
                   
    </script>
    </body>
    </html>