場景:
一個注冊表單,其間有.Net自帶的驗證控件,但有一些驗證必須得借助于另外的一些js,如驗證是否復(fù)選了注冊協(xié)議(這里為了說明,只舉這樣一個簡單的例子)。
這樣的話,會涉及到二次驗證,第一次可能是.Net驗證控件的驗證,第二次會認(rèn)證用戶有沒有復(fù)選注冊協(xié)議,如何讓這二者合作無間呢?
這里不得不提到.Net的Page_ClientValidate()函數(shù),該函數(shù)返回當(dāng)前Page頁中的表單有沒有通過Validate的驗證.
新建一個Page頁面,簡單的放一些控件
- <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
- <asp:Button ID="Button1" runat="server" Text="Button"
- ValidationGroup="submit" CausesValidation="True"
- onclick="Button1_Click" />
- <input type="checkbox" id="checkbox" />我已閱讀注冊協(xié)議
- <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
- ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="不能為空"
- ValidationGroup="submit"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Button"ValidationGroup="submit" CausesValidation="True"onclick="Button1_Click" /><input type="checkbox" id="checkbox" />我已閱讀注冊協(xié)議<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"ControlToValidate="TextBox1" Display="Dynamic" ErrorMessage="不能為空"ValidationGroup="submit"></asp:RequiredFieldValidator>
頁面呈現(xiàn)
TextBox留空,點擊Button,會進(jìn)行一次驗證,當(dāng)在TextBox中輸入文本時,再點擊提交,驗證通過,引發(fā)OnClick事件,但用戶是否復(fù)選了注冊協(xié)議此處還未做判斷。
此時需要我們手寫驗證函數(shù)了
- <script type="text/javascript">
- function test() {
- var isCheck = document.getElementById('checkbox').checked;
- if (isCheck) {
-
- if (Page_ClientValidate('submit')) {
- alert('驗證成功');
- return true;
- }
- }
- else {
- alert('您必須同意注冊協(xié)議');
- return false;
- }
-
- return false;
- }
- </script>
<script type="text/javascript">function test() {var isCheck = document.getElementById('checkbox').checked;if (isCheck) {//Page_ClientValidate('submit'),這里有不同的ValidGroup,所以Page_ClientValidate傳遞是指定的GroupNameif (Page_ClientValidate('submit')) {alert('驗證成功');return true;}}else {alert('您必須同意注冊協(xié)議');return false;}return false;}</script>
修改后的代碼
- <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
- <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="submit" CausesValidation="True"
- OnClientClick="return test();" OnClick="Button1_Click" />
- <input type="checkbox" id="checkbox" />我已閱讀注冊協(xié)議
- <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
- Display="Dynamic" ErrorMessage="不能為空" ValidationGroup="submit"></asp:RequiredFieldValidator>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="submit" CausesValidation="True"OnClientClick="return test();" OnClick="Button1_Click" /><input type="checkbox" id="checkbox" />我已閱讀注冊協(xié)議<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"Display="Dynamic" ErrorMessage="不能為空" ValidationGroup="submit"></asp:RequiredFieldValidator>
預(yù)覽頁面
到這里好像已經(jīng)結(jié)束了,但查看html源代碼會發(fā)現(xiàn):
- <input type="submit" name="Button1" value="Button"
- onclick="return test();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", true, "submit", "", false, false))" id="Button1" />
<input type="submit" name="Button1" value="Button"onclick="return test();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("Button1", "", true, "submit", "", false, false))" id="Button1" />
Button1除了有return test()外還有WebForm_DoPostBackWithOptions這樣一段,很明顯WebForm_DoPostBackWithOptions是不會被執(zhí)行的,去掉這段也很簡單,
將Button1的CausesValidation設(shè)為false即可。
當(dāng)然,你也可以完全不用驗證控件來實現(xiàn)。