Js表单验证控件-02 Ajax验证

 在《Js表单验证控件（使用方便，无需编码）-01使用说明》中，写了Verify.js验证控件的基本用法，基本可以满足大多数验证需求，如果涉及服务端的验证，则可以通过Ajax。

Ajax验证有两种，一种是前端验证，一种是请求服务器端的验证，例如验证密码是否正确。

前端验证很简单，verify.js验证控件的基本原理就是点击验证按钮时，遍历各处控件上的验证属性，如果不满足验证条件，则返回false; 当ajax异步验证时只是调用了验证按钮的事件。

如下，验证表单中的b组控件

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

概述

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>

姓名：  （限中文）

年龄： *

 

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组）

邮箱： * (没有组)

  

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>

 

演示地址：http://weishakeji.net/Utility/Verify/Index.htm  

 开源地址：https://github.com/weishakeji/Verify_Js