表單驗證—js循環所有表單驗證

【封裝為表單驗證的專用js，所有表單頁面都可以調用】

1、表單

<form id="regForm" method="post" action="index/register" onsubmit="checkForm(this)">
....
<td><label class="ui-green"><input type="submit" name="submit" value="提交注冊" /></label></td>

 

2、驗證form表單

function checkForm(frm)
{   
    
    var els = frm.getElementsByTagName("input");    
    for(var i=0; i<els.length; i++) {
        if(typeof(els[i].getAttribute("onblur")) == "function") {
            if(!CheckItem(els[i])) return false;
        }
    }
    return true;
}

 

3、驗證該表單下的所有input框

function CheckItem(obj)
{   
    //將input提示框的內容賦空
    obj.parentNode.parentNode.className = "";

    var msgBox = obj.parentNode.getElementsByTagName("span")[0];
    switch(obj.name) {
    
        case "regUserName":

                        //這后面的業務可以單獨提出來作為一個方法
            if(obj.value == "") {
                msgBox.innerHTML = "密碼不能為空！";
                                //添加className方便統一管理樣式
                msgBox.className = "error";
                return false;
            }else{
                //用戶名被占用
                $.ajax({
                     "url":"index/hasname",
                    "data":"username="+obj.value,
                    "type":"post",
                "dataType":"json",
                 "success":function(data){
                        if(data=="1"){
                            msgBox.innerHTML = "用戶名已存在！";
                            msgBox.className = "error";
                            return false;
                        }else{
                            //用戶名可用
                            msgBox.innerHTML = "用戶名可用！";
                            msgBox.className = "nameinfo";
                        }
                    }
                });
            }
            break;
    
        case "userName":
            if(obj.value == "") {
                msgBox.innerHTML = "密碼不能為空！";
                msgBox.className = "error";
                return false;
            }
            break;
        case "passWord":
            if(obj.value == "") {
                
                msgBox.innerHTML = "密碼不能為空！";
                msgBox.className = "error";
                return false;
            }
            break;
        case "rePassWord":
            if(obj.value == "") {
                msgBox.innerHTML = "密碼不能為空！";
                msgBox.className = "error";
                return false;
            } else if(obj.value != document.getElementById("passWord").value) {
                msgBox.innerHTML = "兩次密碼不一致！";
                msgBox.className = "error";
                return false;
            }
            break;
        case "veryCode":
            if(obj.value == "") {
                msgBox.innerHTML = "驗證碼不能為空！";
                msgBox.className = "error";
                return false;
            }
            break;
    }
    return true;
}