註冊表格（生成日期）

.jsp頁面

script方法：

//生成日期選項

$(document).ready(function(){
     var y=document.getElementById("year"),
     m=document.getElementById("month"),
     d=document.getElementById("day");

     //加載年份
     var year=new Date().getFullYear();    
     for(var i=year;i>=year-90;i--){
        y.options[year+1-i]=new Option(i,i);    //第一個參數是option的文本值，第二個參數是option的value值
     }

     //加載月份
     for(var i=1;i<=12;i++){
        m.options[i]=new Option(i,i);
     }
});
function setDay(){        
    var y=document.getElementById("year"),
    m=document.getElementById("month"),
    d=document.getElementById("day");
    d.length=1;        //初始化
    var y_value=y.value,
        m_value=m.value;
    if(y_value==""||m_value==""){
        return;    
    }
    else{
        var arr=[31,28,31,30,31,30,31,31,30,31,30,31];
        if((y_value%4==0&&y_value%100!=0)||y_value%400==0){
            arr[1]++;    
        }
        for(i=1;i<=arr[m_value-1];i++){
            d.options[i]=new Option(i,i);    
        }
    }
}
function setY(){
    if($("#day").val()!="-日-"){
        var date = $("#day").val();
        setDay();
        if($("#day option:last").text()>=date){
            document.getElementById("day").selectedIndex = date;
        }
    }else{
        setDay();
    }
}
function setM(){
    if($("#day").val()!="-日-"){
        var date = $("#day").val();
            setDay();
        if($("#day option:last").text()>=date){
            document.getElementById("day").selectedIndex = date;
        }
    }else{
        setDay();
    }    
}
function userIdLoseFocus(){
    var userId = $("#userId").val();
    if(userId==""||userId==null){
        $("#userId").after("<span id='losefocus_01'>&nbsp&nbsp✘</span>");
        $("#userId").attr("placeholder","用戶帳號不能爲空");
    }else{
        var xmlhttp;
        if(window.XMLHttpRequest)
        {
            xmlhttp= new XMLHttpRequest();
        }else{
            xmlhttp= ActiveXObject("Mircosoft.XMLHTTP");
        }
        
        var message;
        xmlhttp.open("post","${ctxPath }/BookServlet?bookmethodname=checkUserId",true);
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    message=xmlhttp.responseText;
                    if(message==1){
                    $("#userId").after("<span id='losefocus_01'></span>");
                    $("#losefocus_01").html("✔");
                    $("#losefocus_01").css("color","blue");
                        return;
                    }
                    $("#userId").after("<span id='losefocus_01'></span>");
                    $("#losefocus_01").html(message);
                    $("#losefocus_01").css("color","red");
            }
        }
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhttp.send("userId="+userId);    
    }
}
function userIdGetfocus(){
    $("#losefocus_01").remove();
    $("#userId").attr("placeholder","請輸入用戶帳號");
}
function passwordLoseFocus(){
    var password = $("#password").val();
    if(password==""||password==null){
        $("#password").after("<span id='losefocus_02'>&nbsp&nbsp✘</span>");
        $("#password").attr("placeholder","密碼不能爲空");
    }else{
        $("#password").after("<span id='losefocus_02'>&nbsp&nbsp✔</span>");
        $("#losefocus_02").css("color","blue");
    }
}
function passwordGetfocus(){
    $("#losefocus_02").remove();
    $("#password").attr("placeholder","請輸入密碼");
}
function userNameLoseFocus(){
    var userName = $("#userName").val();
    if(userName==""||userName==null){
        $("#userName").after("<span id='losefocus_03'>&nbsp&nbsp✘</span>");
        $("#userName").attr("placeholder","用戶名不能爲空");
    }else{
        $("#userName").after("<span id='losefocus_03'>&nbsp&nbsp✔</span>");
        $("#losefocus_03").css("color","blue");
    }
}
function userNameGetfocus(){
    $("#losefocus_03").remove();
    $("#userName").attr("placeholder","請輸入用戶名");
}
function yearLoseFocus(){
    var year = $("#year").val();
    if(year=="-年-"){
        if($("#month").val()!="-月-"){
            $("#day").after("<span id='losefocus_06'>✘</span>");
        }else{
            if($("#day").val()!="-日-"){
                $("#day").after("<span id='losefocus_06'>✘</span>");
            }
        }
    }else{
        if($("#month").val()!="-月-"){
            if($("#day").val()!="-日-"){
                $("#day").after("<span id='losefocus_06'>✔</span>");
                $("#losefocus_06").css("color","blue");
            }else{
                $("#day").after("<span id='losefocus_06'>✘</span>");
            }
        }else{
            $("#day").after("<span id='losefocus_06'>✘</span>");
        }
    }
}
function yearGetfocus(){
    $("#losefocus_06").remove();
}
function monthLoseFocus(){
    var month = $("#month").val();
    if(month=="-月-"){
        if($("#year").val()!="-年-"){
            $("#day").after("<span id='losefocus_06'>✘</span>");
        }else{
            if($("#day").val()!="-日-"){
                $("#day").after("<span id='losefocus_06'>✘</span>");
            }
        }
    }else{
        if($("#year").val()!="-年-"){
            if($("#day").val()!="-日-"){
                $("#day").after("<span id='losefocus_06'>✔</span>");
                $("#losefocus_06").css("color","blue");
            }else{
                $("#day").after("<span id='losefocus_06'>✘</span>");
            }
        }else{
            $("#day").after("<span id='losefocus_06'>✘</span>");
        }
    }
}
function monthGetfocus(){
    $("#losefocus_06").remove();
}
function dayLoseFocus(){
    var day = $("#day").val();
    if(day=="-日-"){
        if($("#year").val()!="-年-"){
            $("#day").after("<span id='losefocus_06'>✘</span>");
        }else{
            if($("#month").val()!="-月-"){
                $("#day").after("<span id='losefocus_06'>✘</span>");
            }
        }
    }else{
        if($("#year").val()!="-年-"){
            if($("#month").val()!="-月-"){
                $("#day").after("<span id='losefocus_06'>✔</span>");
                $("#losefocus_06").css("color","blue");
            }else{
                $("#day").after("<span id='losefocus_06'>✘</span>");
            }
        }else{
            $("#day").after("<span id='losefocus_06'>✘</span>");
        }
    }
}
function dayGetfocus(){
    $("#losefocus_06").remove();
}
function tellNoLoseFocus(){
    var tellNo = $("#tellNo").val();
    if(tellNo!=""&&tellNo!=null){
        $("#tellNo").after("<span id='losefocus_05'>&nbsp&nbsp✔</span>");
        $("#losefocus_05").css("color","blue");
    }
}
function tellNoGetfocus(){
    $("#losefocus_05").remove();
    $("#tellNo").attr("placeholder","請輸入聯繫電話");
}
function genderLoseFocus(){
    var gender_01 = $("#gender_01").val();
    var gender_02 = $("#gender_02").val();
    if(gender_01==1 || gender_02==2){
        $("#nv").after("<span id='losefocus_04'>&nbsp&nbsp✔</span>");
        $("#losefocus_04").css("color","blue");
    }
}
function genderGetfocus(){
    $("#losefocus_04").remove()；
}

//點擊註冊按鈕時檢測
function checkInfo(){
    if($("#userId").val()!="" && $("#userId").val()!=null){
        if($("#password").val()!=""&&$("#password").val()!=null){
            if($("#userName").val()!=""&&$("#userName").val()!=null){
                if($("#losefocus_06").html()=="✘"){
                    alert("請輸入完整日期");
                    return false;
                }else{
                    if($("#losefocus_01").html()=="✔"){
                        return true;
                    }else{
                        alert("用戶名已存在");
                        return false;
                    }
                }
            }else{
                alert("用戶名不能爲空");
                return false;
            }
        }else{
            alert("密碼不能爲空");
            return false;
        }        
    }else{
        alert("用戶帳號不能爲空");
        return false;
    }
}

 

 

<form name="register" action="" onsubmit = "return checkInfo();" method="post">  //action後輸入表格提交地址，通常提交到servlet中       
<input type="text" id="userId" name="userId" maxlength="10" placeholder="請輸入用戶帳號" onblur="userIdLoseFocus();" onfocus="userIdGetfocus();" style="width:150px;height:20px"/>

//maxlength="10"規定了最大輸入的字符數
<input type="password" id="password" name="password" maxlength="10" placeholder="請輸入密碼" onblur="passwordLoseFocus();" onfocus="passwordGetfocus();" style="width:150px;height:20px"/>
 <input type="text" id="userName" name="userName" maxlength="20" placeholder="請輸入用戶名" onblur="userNameLoseFocus();" onfocus="userNameGetfocus();" style="width:150px;height:20px"/>
 <input type="radio" id="gender_01" name="gender" value="男" onblur="genderLoseFocus();" onfocus="genderGetfocus();"/>男
 <input type="radio" id="gender_02" name="gender" value="女" onblur="genderLoseFocus();" onfocus="genderGetfocus();"/><span id="nv">女&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
 <label class="contact"><strong>Birthday:</strong></label>  //輸入生日
 <select id="year" name="year" onchange="setY();" onblur="yearLoseFocus();" onfocus="yearGetfocus();">
                          <option >-年-</option>
                    </select>---
                    <select id="month" name="month" onchange="setM();" onblur="monthLoseFocus();" onfocus="monthGetfocus();">
                        <option>-月-</option>
                    </select>---
                    <select id="day" name="day" onblur="dayLoseFocus();" onfocus="dayGetfocus();">
                        <option>-日-</option>
                    </select>
<label class="contact"><strong>Tell_No:</strong></label>

<input type="text" id="tellNo" name="tellNo" maxlength="11" placeholder="請輸入電話" onblur="tellNoLoseFocus();" onfocus="tellNoGetfocus();" style="width:150px;height:20px"/>
 <input type="checkbox" name="terms" id="terms"/>
  I agree to the <a href="#">terms &amp; conditions</a>            
                     <input type="submit" class="register" value="register" />
                    </div>   
                  </form>