css&javascript 「加入會員」驗證資料及亂數產生驗證碼

網站中加入會員應該是必預的
yahoo、google、hotmail、pchome，各大網站都有這個
現只針對網頁上格式進行驗證，所有驗證都寫在一個function裡
只要有不符合，就記下警示訊息，在按下加入會員後會跳出警告視窗
規則是只要警示訊息裡有文字，就是有錯

特別的地方有2個：

1. 選擇縣市
2. 驗證圖及檢驗輸入是否對應驗證碼

由於驗證碼的答案是存在cookie中，要在網頁中撈出cookie
除了原本的jquery的函式庫外，另外要再抓jquery.cooke的函式庫
用javascript也可以抓cookie，不過jquery真的比較方便就是了

<script src="/scripts/jquery-1.11.1.min.js"></script>
<script src="scripts/jquery.cookie.js"></script>

驗證圖會參考之前C#做的亂數驗證圖
抓出該dll檔後引入參考，並用ashx泛式的方式來戴入引用：

public void ProcessRequest(HttpContext context)
{
    Vaild.VaildNum vn = new Vaild.VaildNum(8);//引用驗證亂數產生8字元
    String Code = vn.VaildNumAnswer;//驗證的答案
    Bitmap bmp = vn.VaildNumImage;  //產生出來的圖
    System.IO.MemoryStream ms = new System.IO.MemoryStream();//new出在伺服器的記憶體
    bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); //以jpeg的方式存入
                      
        HttpCookie cc = new HttpCookie("Code");//new 個cookie，key為"Code"
        cc.Value = Code;
        cc.Expires = DateTime.Now.AddMonths(3);//到期日為本日加3個月
        context.Response.Cookies.Add(cc); //將cookie加到使用者的瀏覽器
    
    byte[] bb = ms.ToArray();//將記憶體轉為byte陣列
    context.Response.OutputStream.Write(bb, 0, bb.Length);//寫回    
}

接著是script語法，驗證圖及鄉鎮的應用
$(document).ready的function中最後有檢驗表單

var address;//預計放入地址的xml檔案
var confirm;//預計存方驗證圖的答案

$(document).ready(function () {

    $("#RefreshVaildImgBtn").click(function () {
                
        $("#VaildNumImg").attr("src" , "/Tools/GetVaildImage.ashx?tt=" + new Date().getTime());
                    //亂數的泛式ashx，確認不會載入預存的網頁加new Date

        confirm = $.cookie("Code");//驗證碼存在cookie中
    });

    //Ajax載入地址的xml
    $.get("/Tools/Address.xml", null, LoadCounty);
    //縣市變更時，載入鄉鎮
    $("#County").change(LoadRegion);
    //按下確認時，檢驗表單
    $("#SubmitBtn").click(CheckForm);

});

//載入縣市，xx是Ajax載入的xml檔案
function LoadCounty(xx) {
    address = xx;
    $(address).find("County").each(function () {//找出這xml檔案中，每個County也就是縣市
        var vv = $(this).attr("Name");//抓出County的Name屬性
        var s = "" + vv + "";//以html選項的原始碼包起來
        $(s).appendTo("#County");//加上在網頁id為County的列表
    });
}
//載入鄉鎮
function LoadRegion() {

    $("#Region").empty();//先清空鄉鎮的資料
    $("--請選擇--").appendTo("#Region");//加第1筆「--請選擇--」
            
    var cc = $("#County").val();//抓出縣市的value
    if (cc == "--請選擇--") return;//若縣市是「--請選擇--」則離開此function

    $(address).find("County[Name=\"" + cc + "\"]").children().each(function () {
        //找出County為cc的元素，鄉鎮是該元素的子元素
        //所以要children()，每個都要用each()
        var vv = $(this).attr("Name");
        var s = "" + vv + "";
        $(s).appendTo("#Region");
    });
}

驗證各欄位的function：

function CheckForm()
{
    var msg = "";//警告訊息
    var regx = "";//驗證規則
            
    //帳號驗證-------------------------------------------
    regx = /^[A-Za-z]\w{1,20}$/; 
    if ($("#Account").val().length == 0)
        msg += "* 請一定要填寫申請帳號！\n";
    else if (!regx.test($("#Account").val()))
        msg += "* 請填寫正確的帳號！\n";
            
    //密碼驗證-------------------------------------------
    if ($("#Password").val().length == 0)
        msg += "* 請一定要填寫密碼！\n";
    if ($("#ConfirmPassword").val().length == 0)
        msg += "* 請再次輸入欲使用的密碼！\n";
    else if ($("#Password").val() != $("#ConfirmPassword").val())
        msg += "* 兩次輸入的密碼不相符！\n";
            
    //性別驗證-------------------------------------------
    var c1=$("#Sex_Male").prop("checked")?true:false;
    var c2=$("#Sex_Female").prop("checked")?true:false;
    if (!(c1 || c2))
        msg += "* 請選擇性別\n";     
            
    //信箱驗證-------------------------------------------
    regx = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    if ($("#EMail").val().length == 0)
        msg += "* 請一定要填寫電子郵件\n";
    else if (!regx.test($("#EMail").val()))
        msg += "* 請填寫正確的電子郵件\n";

    //驗證碼---------------------------------------------
    if ($("#VaildAnsText").val().length == 0)
        msg += "* 請一定要填寫驗證碼！\n";
    else if ($("#VaildAnsText").val() != $.cookie("Code"))
        msg += "* 請填寫正確的驗證碼！\n";

    //警告訊息裡有文字就跳出警告視窗
    if (msg != "") {
        alert(msg);
        return false;
    }
    else
    {
        $("#form1").submit();                
    }
}