# jQuery Mobile註冊表單
###### tags: `jQuery` `JavaScript` `jQuery Mobile`

---

:::info
本章重點:
1.練習即時監聽 .bind() 與 .change()
2.使用 .val()抓取值並計算
3.flag舉旗降旗的觀念，如條件不符合就不能註冊
:::

#### JS

$(function(){
    // 即時監聽帳號
    $("#username").bind("input propertychange",function(){
        if($(this).val().length>4){
            $("#username-info").html("帳號字數正確");
            $("#username-info").css("color","green");
            flag_username = true;    				
        }else{
            $("#username-info").html("帳號字數不滿5字");
            $("#username-info").css("color","red");
            flag_username = false;   
        }
    });

    // 即時監聽密碼
    $("#password").bind("input propertychange",function(){
        if($(this).val().length>4 && $(this).val().length<9){
            $("#password-info").html("字數正確!");
            $("#password-info").css("color","green"); 
            flag_password = true;   				
        }else{
            $("#password-info").html("密碼需介於5~8字");
            $("#password-info").css("color","red");
            flag_password = false; 
        } 
    });
    //即時監聽確認密碼
    $("#password-check").bind("input propertychange",function(){
        if($(this).val() === $("#password").val()){
            $("#password-check-info").html("密碼一致!");
            $("#password-check-info").css("color","green");
            flag_password_check = true;
        }else{
            $("#password-check-info").html("密碼不一致!");
            $("#password-check-info").css("color","red");
            flag_password_check = false;
        }
    });

    //即時監聽年齡，確認是否成年
    $("#age").change(function(){
        if($(this).val()>18){
            $("#age-info").html("已成年");
            $("#age-info").css("color","green");
            flag_age = true;
        }else{
            $("#age-info").html("未成年請勿註冊");
            $("#age-info").css("color","red");
            flag_age = false;
        }
    });

    //確認資料正確性
    var flag_username = false;
    var flag_password = false;
    var flag_password_check = false;
    var flag_age = false;

    $("#submit").bind("click",
        function(){
            //所有條件都符合才可執行
            if(flag_username && flag_password && flag_password_check &&flag_age){
                console.log($("#username").val());
                console.log($("#password").val());
                console.log($("#password-check").val());
                console.log($("#age").val());				
            }else{
                //驚嘆號表示不相等，出現提示警告
                if(!flag_age){
                    alert('未成年不得註冊!');
                }
                alert('資料有誤!');
            };   				
        });
});//主程式結尾

#### HTML

 <div data-role="page" id="HOME">
        <!-- HEADER -->
        <div data-role="header" data-theme="b">
            <h1>成年註冊表單</h1>
        </div><!-- /HEADER -->
        <!-- CONTENT -->
        <div role="main" class="ui-content">
        	<div id="progressbar"></div>
			<div data-role="fieldcontain">
				<label for="username">帳號</label>
				<input type="text" name="username" id="username" placeholder="請輸入帳號">
			</div>
			<div id="username-info"></div>
			<div data-role="fieldcontain">
				<label for="password">密碼</label>
				<input type="password" name="password" id="password" placeholder="請輸入密碼">
			</div>
			<div id="password-info"></div>
			<div data-role="fieldcontain">
				<label for="password-check">確認密碼</label>
				<input type="password" name="password-check" id="password-check" placeholder="請輸入確認密碼">
			</div>
			<div id="password-check-info"></div>
			<div data-role="fieldcontain">
				<label for="bday">生日</label>
				<input type="date" name="bday" id="bday">
			</div>
			<div data-role="fieldcontain">
				<label for="age">年齡</label>
				<input type="range" name="age" id="age" min="1" max="100" step="1" value="22">
			</div>
			<div id="age-info"></div>			
			<div class="ui-grid-a" >
				<div class="ui-block-a"><a href="#" id="delete" data-role="button" data-theme="b" data-icon="info">清除</a></a></div>
				<div class="ui-block-b"><a href="#" id="submit" data-role="button" data-theme="b" data-icon="info" class="ui-btn-active">確認</a></a></div>
			</div>			
        </div><!-- /CONTENT -->
    </div><!-- /HOME page -->

---
<style>
h2 {
color: #2383B8;
}
h3 {
color: #1AA340;
}
h4 {
color: white;
background-color: #2383B8;
padding:8px;
}

.code1 {
padding: 2px 4px;
font-size: 90%;
color: #c7254e;
background-color: #f9f2f4;
border-radius: 4px;
font-family:'Fira Code';
}
.code {
padding: 2px 4px;
font-size: 90%;
font-family:'Fira Code';
}
</style>