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>

 

posted @ 2018-03-13 15:46  songsoft  阅读(267)  评论(0编辑  收藏  举报