# Ajax异步验证

## 概述

Verify.js所提供的验证方法，都是基于前端技术，针对一些需要与服务器端交互的验证，例如验证码、短信验证、登录验证等，需要接合Ajax的方式异步与服务器端交互，返回判断结果。 根据判断结果，指定具体的某个控件校验证失败，并显示提示。

相较于之前的验证方式（只用增加控件属性即可实现验证），Ajax的代码编写略显复杂，如果熟悉Javascrpt代码编写，其实也很简单。 如下代码，是在指定的控件上显示错误提示信息。

Verify.ShowBox($("form input[name=tbPhone]"), "该手机号未在系统中注册！");

## 示例

### 1、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>

姓名： （限中文）

年龄：

验证表单(div)

### 2、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>

账号： （a组）

姓名： （b组）

年龄： （ab组）

电话： （b组）

邮箱： (没有组)

验证A组(div)
验证B组(div)
验证AB组(div)
验证没有组(div)

### 3、通过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>

姓名： （限中文）

验证表单(div)