Js表單驗證控件-02 Ajax驗證

時間 2019-11-11

原文原文鏈接

在《Js表單驗證控件（使用方便，無需編碼）-01使用說明》中，寫了Verify.js驗證控件的基本用法，基本能夠知足大多數驗證需求，若是涉及服務端的驗證，則能夠經過Ajax。javascript

Ajax驗證有兩種，一種是前端驗證，一種是請求服務器端的驗證，例如驗證密碼是否正確。html

前端驗證很簡單，verify.js驗證控件的基本原理就是點擊驗證按鈕時，遍歷各處控件上的驗證屬性，若是不知足驗證條件，則返回false; 當ajax異步驗證時只是調用了驗證按鈕的事件。前端

以下，驗證表單中的b組控件java

Verify.IsPass($("form"),"b")

概述

Verify.js所提供的驗證方法，都是基於前端技術，針對一些須要與服務器端交互的驗證，例如驗證碼、短信驗證、登陸驗證等，須要接合Ajax的方式異步與服務器端交互，返回判斷結果。根據判斷結果，指定具體的某個控件校驗證失敗，並顯示提示。git

相較於以前的驗證方式（只用增長控件屬性便可實現驗證），Ajax的代碼編寫略顯複雜，若是熟悉Javascrpt代碼編寫，其實也很簡單。以下代碼，是在指定的控件上顯示錯誤提示信息。github

Verify.ShowBox($("form input[name=tbPhone]"), "該手機號未在系統中註冊！");ajax

示例

一、Javascript單獨驗證某個控件

注意，下述代碼中沒有form標籤，再也不經過form的提交事件進行驗證，而是手工編寫Javascript代碼對任一一個控件進行單獨驗證。服務器

綠色的按鈕只是一個普通的Div標籤，只是樣式像個按鈕。異步

<p> 姓名：
      <input name="name" type="text" size="6" datatype="chinese"
     place="right" lenlimit="2-4" alt="限2至4箇中文字/符">
      <span>（限中文）</span> </p>
    <p> 年齡：
      <input type="text"  name="age" size="4" datatype="uint" nullable="false" place="right" />
    </p>
    <p>
    <div class="btn" id="btn">驗證表單(div)</div>
    </p>
    <script type="text/javascript">
$("#btn").click(function(){
	if(Verify.IsPass($("input[type=text][name=name]"))){
		alert("姓名錄入合格");
	};
	if(Verify.IsPass($("input[type=text][name=age]"))){
		alert("年齡錄入合格");
	};
});
</script>

姓名：（限中文）post

年齡： *

二、Javascript批量驗證控件

當點擊按鈕時，能夠實現對form表單內的控件進行分組驗證，所有經過則返回true，不然返回false。該過程不會觸發form的submit事件。

form在此處能夠僅僅做爲一個容器。

<form place="right">
      <p> 帳號：
        <input name="" type="text" nullable="false" datatype="user" group="a"/>
        （a組） </p>
      <p> 姓名：
        <input name="" type="text" size="6" datatype="chinese" lenlimit="2-4" group="b" alt="限2至4箇中文字/符">
        <span>（b組）</span> </p>
      <p> 年齡：
        <input type="text" size="4" datatype="uint" nullable="false" place="right" group="a|b"/>
        （ab組） </p>
      <p> 電話：
        <input type="text" datatype="mobile|tel" nullable="false" alt="請輸入正確的電話號碼" group="b">
        （b組） </p>
      <p> 郵箱：
        <input type="text" datatype="email" nullable="false" />
        (沒有組) </p>
      <p>
      <div class="btn" id="btnA">驗證A組(div)</div>
      <div class="btn" id="btnB">驗證B組(div)</div>
      <div class="btn" id="btnAB">驗證AB組(div)</div>
      <div class="btn" id="btnNull">驗證沒有組(div)</div>
      </p>
      <script type="text/javascript">
$("#btnA").click(function(){
	if(Verify.IsPass($("form"),"a")){
		alert("a組驗證經過");
	};	
});
$("#btnB").click(function(){
	if(Verify.IsPass($("form"),"b")){
		alert("b組驗證經過");
	};	
});
$("#btnAB").click(function(){
	if(Verify.IsPass($("form"),"a|b")){
		alert("ab組驗證經過");
	};	
});
$("#btnNull").click(function(){
	if(Verify.IsPass($("form"))){
		alert("沒有分組的控件驗證經過");
	};	
});
</script>
    </form>

三、經過Ajax回調，手動顯示錯誤提示

注意，Ajax的調用必須是在http狀態下。

<p> 姓名：
      <input name="name2" type="text" size="6" 
  datatype="chinese" place="right" lenlimit="2-4" alt="請輸入中文">
      <span>（限中文）</span> </p>
   
    <p>
      <div class="btn" id="btnGet">驗證表單(div)</div>
    </p>
    <script type="text/javascript">
$("input[name=button2]").click(function(){
	$.get("1-1.htm",function(){
		Verify.ShowBox($("input[type=text][name=name2]"),"姓名已經存在");
	});
});
</script>