JavaScript实现表单验证

目录

• 一、Javascript 表单验证
• 1、数据验证
• 2、约束验证
• 1、约束验证 HTML 输入属性
• 2、约束验证 CSS 伪类选择器
• 二、Javascript 验证 API
• 1、checkValidity() 方法
• 2、setCustomValidity
• 三、表单文本框自动验证

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

名字: 

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

姓: 

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}

    Email: 
    

验证
 

 

验证
 

 

setCustomValidity("") 
setCustomValidity(null) 
setCustomValidity(undefined)

var inpObj = document.getElementById("id1");
inpObj.setCustomValidity(""); // 取消自定义提示的方式
if (inpObj.checkValidity() == false) {
    if(inpObj.value==""){
        inpObj.setCustomValidity("不能为空！");
    }else if(inpObj.value<100 || inpObj.value>300){
        inpObj.setCustomValidity("请重新输入数值（100~300之间）!");
    }
    document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
    document.getElementById("demo").innerHTML = "输入正确";
}

(function(){
       if(window.addEventListener) window.addEventListener("load",init,false);
       else if(window.attachEvent) window.attachEvent("onload",init);
        
      function init(){
       for(var i=0;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)
           {
               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"; 
               e.setAttribute("pattern",pattern);
               }
 
               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

 


Name:

email:

zipcode:

unvalidated: