javascript寫註冊檢測驗證

html代碼:

<tr>
                        <td>
                           用戶名&nbsp;&nbsp;&nbsp;<input type="text" id="sname">
                           <span class="word"></span>
                        </td><br>
                    </tr>
                    <tr>
                        <td>
                            密碼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="password" id="spassword1">
                            <span class="word"></span>
                        </td><br>
                    </tr>
                    <tr>
                        <td>
                            密碼確認&nbsp;&nbsp;<input type="password" id="spassword2">
                            <span class="word"></span>
                        </td><br>
                    </tr>
                    <tr>
                        <td>
                            電話號碼&nbsp;&nbsp;<input type="text" id="tel">
                            <span class="word"></span>
                        </td><br>
                    </tr>
                    <tr>
                        <td>
                            性別&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="ssex" value= "男" checked><input type="radio" value= "女" name="ssex"><br>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            詳細地址<br><br>
                            <textarea rows="5" cols="30" id="adds"></textarea>
                            <span class="word"></span>
                        </td>
                    </tr>
                    <tr>
                        <td id="hobbys">
                            愛好&nbsp;&nbsp;&nbsp;&nbsp;
                            <input type="checkbox" name="shobby" value="體育"/> 體育
                            <input type="checkbox" name="shobby" value="音樂"/>音樂
                            <input type="checkbox" name="shobby" value="文學"/>文學
                            <input type="checkbox" name="shobby" value="其他"/>其他
                            <span class="word"></span>
                        </td><br>
                    </tr>
                    <tr>
                        <td>
                            學歷&nbsp;&nbsp;&nbsp;&nbsp;
                            <select id="sedu">
                            <option value="小學">小學</option>
                            <option value="初中">初中</option>
                            <option value="高中">高中</option>
                            <option value="大學">大學</option>
                            </select><br>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" id="agreebox">我同意此協議
                            <span class="word"></span>
                        </td><br>
                    </tr>

js代碼:

function checksname()//檢測用戶名
{
    var sname = document.getElementById("sname");
    if(sname.value=="")//檢測用戶名事都爲空
    {
        sname.parentNode.getElementsByTagName("span")[0].innerHTML="用戶名輸入不能爲空!";
        return false;
    }
    else
    {
        sname.parentNode.getElementsByTagName("span")[0].innerHTML="√";
        return true;
    }
}   

function checkpassword1()//檢測密碼
{ 
    var password1 = document.getElementById("spassword1");  
    if(password1.value=="")//檢測密碼是否爲空
    {
        password1.parentNode.getElementsByTagName("span")[0].innerHTML="密碼輸入不能爲空!";
        return false;
    }
    else if(password1.value.length > 10)//檢測密碼長度不能超過10個字符
    {
        password1.parentNode.getElementsByTagName("span")[0].innerHTML="密碼長度不能超過10個字符!";
        return false;
    }
    else if(password1.value.length < 6)//檢測密碼長度不能少於6個字符
    {
        password1.parentNode.getElementsByTagName("span")[0].innerHTML="密碼長度至少6個字符!";
        return false;
    }
    else
    {
        password1.parentNode.getElementsByTagName("span")[0].innerHTML="√";
        return true;
    }
}

function checkpassword2()//檢測確認密碼
{
    var password1 = document.getElementById("spassword1");
    var password2 = document.getElementById("spassword2");
    if(password2.value=="")//檢測密碼是否爲空
    {
        password2.parentNode.getElementsByTagName("span")[0].innerHTML="請再次輸入密碼!";
        return false;
    }
    else if(password2.value.length > 10)//檢測密碼長度不能超過10個字符
    {
        password2.parentNode.getElementsByTagName("span")[0].innerHTML="密碼長度不能超過10個字符!";
        return false;
    }
    else if(password2.value.length < 6)//檢測密碼長度不能少於6個字符
    {
        password2.parentNode.getElementsByTagName("span")[0].innerHTML="密碼長度至少6個字符!";
        return false;
    }
    else if(password1.value != "" && password2.value != "" && password1.value != password2.value)
    {//檢測兩次輸入密碼是否相同
        password2.parentNode.getElementsByTagName("span")[0].innerHTML="兩次輸入的密碼不相同,請重新輸入!";
        return false;
    }
    else
    {
        password2.parentNode.getElementsByTagName("span")[0].innerHTML="√";
        return true;
    }
}

function checktel()//檢測電話號碼
{
    var tel=document.getElementById("tel");
    if(tel.value=="")//檢測電話號碼是否爲空
    {
        tel.parentNode.getElementsByTagName("span")[0].innerHTML="請輸入電話號碼!";
        return false;
    }
    else if(tel.value.length != 11)//檢測電話號碼長度
    {
        tel.parentNode.getElementsByTagName("span")[0].innerHTML="電話號碼長度不正確!";
        return false;
    }
    else if(isNaN(tel.value))//檢測電話號碼是否爲數字
    {
        tel.parentNode.getElementsByTagName("span")[0].innerHTML="電話號碼輸入不是數字!";
        return false;
    }
    else
    {
        tel.parentNode.getElementsByTagName("span")[0].innerHTML="√";
        return true;
    }

}

function checkadds()//檢測地址
{
    var adds =document.getElementById("adds");
    if(adds.value=="")
    {
        adds.parentNode.getElementsByTagName("span")[0].innerHTML="請輸入您的地址!";
        return false;
    }
    else
    {
        adds.parentNode.getElementsByTagName("span")[0].innerHTML="√";
        return true;
    }
}

function checkhobbys()//檢測愛好
{
    var hobbys = document.getElementById("hobbys");
    var shobby = hobbys.getElementsByTagName("input");
    if(shobby[0].checked == false && shobby[1].checked == false &&
        shobby[2].checked == false && shobby[3].checked== false)
    {
        hobbys.getElementsByTagName("span")[0].innerHTML="請選擇您的愛好!";
        return false;
    }
    else
    {
        hobbys.parentNode.getElementsByTagName("span")[0].innerHTML="√";
        return true;
    }
}

function checkagreebox()//檢測同意協議
{
    var agreebox = document.getElementById("agreebox");
    if(agreebox.checked == false)
    {
        agreebox.parentNode.getElementsByTagName("span")[0].innerHTML="“請同意此協議”不能爲空!";
        return false;
    }
    else
    {
        agreebox.parentNode.getElementsByTagName("span")[0].innerHTML="√";
        return true;
    }
}

function checkall()//檢測全部
{
    if(checksname() && checkpassword1() && checkpassword2() && checktel() && checkadds()
       && checkhobbys() && checkagreebox())
    {
        alert("註冊成功啦,快去登錄吧!");
        return true;
    }
    else 
    {
        return false;
    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章