前臺 JS 驗證

根據控件本身的參數設定，附加 JS 腳本控年，

1.在控件焦點離開時，

2.在提交事件觸發時，全部進行一次驗證。

3.錯誤消息自動顯示在控件（現只能是文本框） 右側。

4.提交按鈕應該做兩個，一個服務器端控件，做真正的提交。另外一個HTML端控件，當用戶按下時，先判斷條件是否成熟，成熟再調用

  服務端按鈕的 click 事件。

 

<input type="text" id="txtName" runat="server"  validreg="regNonEmpty" validmessage="姓名不能為空！" />

 

            <asp:ImageButton ID="btnRegistry_Server"  Style="display:none;"
                    runat="server" οnclick="btnRegistry_Click" />

 

            <img src="App_Themes/Images/enter.gif" οnclick="btnRegistry_Client_onclick" />                  

 

        function btnSubmit_click() {
            if (CheckAllValue()) {
                document.getElementById("btnRegistry_Server").click();

            }
        }

 

 

//根據頁面標籤自己的設置，進行校驗。不通過則不提交！
var regDateTime = "(^[/d]{4}-[/d]{1,2}-[/d]{1,2}$)|(^[/d]{4}/[/d]{1,2}/[/d]{1,2}$)";                 //日期，無時間
var regOrderNo = "^[0-9a-zA-Z]{5,}$";                                //訂單號
var regAmount = "^[-]?[0-9.]+$";                                     //金額
var regPNR = "^[0-9a-zA-Z]{5}$";                                    // PNR
var regTicketNo= "^([0-9]{3}-?)?[0-9]{10}$";                         //票號
var regInteger = "^[0-9]{1,8}$";                                     //整數
var regAirPort = "^[a-zA-Z]{3}$";                                   //港口
var regRebate = "(^[1-5]?[0-9]?//.{1}[0-9]{0,3}$)|(^[1-5]?[0-9]?$)";  //政策
var regNonZero = "[^0//s]+";
var regNonEmpty = ".+";
var regBankCode = "^[a-zA-Z]{1,4}$";

var regEmail = "^.{1,}@.{1,}/..{1,}$";
var regTel = "^[0-9]{7,20}$";
var regFax = "^[0-9]{7,20}$";
var regMobil = "^[0-9]{10,20}$";
var regPwd = "^[//S]{6,20}$";

$(function() {
$("input[validreg]").each(function(i) {
        this.onblur = function() { CheckSingleValue(this) };
    });

})

function CheckAllValue() {
    var isOk = true;
    $("input[validreg]").each(function(i) {
        if (CheckSingleValue(this) == false) {
            isOk = false;
        }
    });
    return isOk;
}

function CheckSingleValue(c1) {

    var valid = "";
    try {
        valid = eval(c1.validreg);
    }
    catch (e) {
        valid = c1.validreg;
    }
    c1.value = c1.value
    var ControlValue = c1.value;
    var message = c1.validmessage;
    var reg = new RegExp(valid);
    var ErrControl;
    var msgHold = "Err" + c1.id;
    var isExists = document.getElementById(msgHold);
    var TestResult = reg.test(ControlValue);

    if (c1.allowempty == "true" && ControlValue == "") {
        TestResult = true;
    }
   
   
    if (isExists != null || !TestResult) { //存在控件，或者測試失敗。
        if (isExists == null) { //如果不存在控件則創建
            ErrControl = document.createElement("span");
            ErrControl.id = msgHold;
            ErrControl.name = msgHold;
            ErrControl.style.color = "Red";
            if (c1.parentNode.lastChild == c1) {
                c1.parentNode.insertBefore(ErrControl, c1.nextSibling);
            }
            else {
                c1.parentNode.appendChild(ErrControl);
            }
        }

        if (TestResult == true) {
            document.getElementById(msgHold).innerHTML = "&nbsp;";
            return true;
        }
        else {
            document.getElementById(msgHold).innerHTML = message;
            return false;
        }

    }
    else {
        return true;
    }
}