本文共 2662 字，大约阅读时间需要 8 分钟。

表单对象：（属于DOM对象的子对象）

• 找到对象：
  document.getElementById()
  document.forms.username
  document.frm1.username
• 属性：（本身表单有的属性，都可以是对象的属性）
  action：表单数据的处理程序
  method：表单的提交方式GET、POST
  enctype：表单数据的编码方式（加密）
• 方法
  submit()：提交表单
  focus()：获取焦点
• 事件：
  onfocus()：当获得焦点时执行的事件
  onblur()：当失去焦点时执行的事件
  onchange()：内容改变触发

验证：前后台都需要验证

form上有个onsubmit()：提交事件，当单击提交按钮时发生的事件。在数据传到服务器之前

HTML代码：

    
   
        username:
        
    请输入用户名    
    
    password:
        
    请输入密码
    
    repass:
        
    请确认密码
    
    email:
        
    请输入邮箱
    
    other:
        
    请输入其他
    
    submit:
    
   

JS代码：

function getSpan(obj) {
      //获取下一个span    while(true) {
           if (obj.nextSibling.nodeName != "SPAN") {
               obj = obj.nextSibling;        } else {
               return obj.nextSibling        }    }}function check(obj,info,fun,click){
      //检查方法    obj.onfocus=function () {
           var sp=getSpan(obj);        sp.innerHTML=info;        sp.className="stats2";    }    obj.onblur=function () {
           var sp=getSpan(obj);        if (fun(this.value)) {
               sp.innerHTML="输入正确";            sp.className="stats4";        }else{
               sp.innerHTML=info;            sp.className="stats3";        }    }    if (click=="click") {
           obj.onblur();    }}onload=rpg;//页面加载完自动调用function rpg(click) {
       var stat=true;    var username=document.getElementsByName("username")[0];    var password=document.getElementsByName("password")[0];    var repass=document.getElementsByName("repass")[0];    var email=document.getElementsByName("email")[0];    var other=document.getElementsByName("other")[0];    check(username,"用户名的长度在3~20之间",function (val) {
           if(val.match(/^\S+$/)&&val.length>=3&&val.length<=20)            return true;        else            stat=false;            return false;    },click);    check(password,"密码长度为6~20",function (val) {
           if(val.match(/^\S+$/)&&val.length>=6&&val.length<=20)            return true;        else            stat=false;            return false;    },click);    check(repass,"确认密码一致",function (val) {
           if(val.match(/^\S+$/)&&val.length>=6&&val.length<=20&&val==password.value)            return true;        else            stat=false;            return false;    },click);    check(email,"遵循邮箱规则写法",function (val) {
           if(val.match(/\w+@\w+\.\w/))            return true;        else            stat=false;            return false;    },click);    check(password,"密码长度为6~20",function (val) {
           if(val.match(/^\S+$/)&&val.length>=6&&val.length<=20)            return true;        else            stat=false;            return false;    }.click);    return stat;}

运行结果：

转载地址：http://xvmgn.baihongyu.com/