xinyilu/ZhiYeJianKang_PeiXun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
1b36b5d0d0
ZhiYeJianKang_PeiXun/Song.Site/Utility/Verify/Demo/3-4.htm
xinyilu 1b36b5d0d0 v1
2025-02-20 15:41:53 +08:00

130 lines
8.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../Scripts/jquery.js"></script>
<script type="text/javascript" src="../Scripts/Verify.js"></script>
<link href="../Styles/Public.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.btn {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Ajax异步验证</h1>
<h2>概述</h2>
<div class="desc">
<p>Verify.js所提供的验证方法，都是基于前端技术，针对一些需要与服务器端交互的验证，例如验证码、短信验证、登录验证等，需要接合Ajax的方式异步与服务器端交互，返回判断结果。
根据判断结果，指定具体的某个控件校验证失败，并显示提示。</p>
<p>相较于之前的验证方式（只用增加控件属性即可实现验证），Ajax的代码编写略显复杂，如果熟悉Javascrpt代码编写，其实也很简单。
如下代码，是在指定的控件上显示错误提示信息。</p>
<p>Verify.ShowBox($(&quot;form input[name=tbPhone]&quot;), &quot;该手机号未在系统中注册！&quot;);</p>
</div>
<h2>示例</h2>
<h3>1、Javascript单独验证某个控件</h3>
<div class="desc">
<p>注意，下述代码中没有form标签，不再通过form的提交事件进行验证，而是手工编写Javascript代码对任一一个控件进行单独验证。 </p>
<p>绿色的按钮只是一个普通的Div标签，只是样式像个按钮。</p>
<fieldset>
<pre>&lt;p&gt; 姓名：<br /> &lt;input name=&quot;name&quot; type=&quot;text&quot; size=&quot;6&quot; datatype=&quot;chinese&quot;
place=&quot;right&quot; lenlimit=&quot;2-4&quot; alt=&quot;限2至4个中文字/符&quot;&gt;<br /> &lt;span&gt;（限中文）&lt;/span&gt; &lt;/p&gt;<br /> &lt;p&gt; 年龄：<br /> &lt;input type=&quot;text&quot; name=&quot;age&quot; size=&quot;4&quot; datatype=&quot;uint&quot; nullable=&quot;false&quot; place=&quot;right&quot; /&gt;<br /> &lt;/p&gt;<br /> &lt;p&gt;<br /> &lt;div class=&quot;btn&quot; id=&quot;btn&quot;&gt;验证表单(div)&lt;/div&gt;<br /> &lt;/p&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br />$(&quot;#btn&quot;).click(function(){<br /> if(Verify.IsPass($(&quot;input[type=text][name=name]&quot;))){<br /> alert(&quot;姓名录入合格&quot;);<br /> };<br /> if(Verify.IsPass($(&quot;input[type=text][name=age]&quot;))){<br /> alert(&quot;年龄录入合格&quot;);<br /> };<br />});<br />&lt;/script&gt;</pre>
<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>
</fieldset>
</div>
<h3>2、Javascript批量验证控件</h3>
<div class="desc">
<p>当点击按钮时，可以实现对form表单内的控件进行分组验证，全部通过则返回true，否则返回false。该过程不会触发form的submit事件。 </p>
<p>form在此处可以仅仅作为一个容器。</p>
<fieldset>
<pre>&lt;form place=&quot;right&quot;&gt;<br /> &lt;p&gt; 账号：<br /> &lt;input name=&quot;&quot; type=&quot;text&quot; nullable=&quot;false&quot; datatype=&quot;user&quot; group=&quot;a&quot;/&gt;<br /> （a组） &lt;/p&gt;<br /> &lt;p&gt; 姓名：<br /> &lt;input name=&quot;&quot; type=&quot;text&quot; size=&quot;6&quot; datatype=&quot;chinese&quot; lenlimit=&quot;2-4&quot; group=&quot;b&quot; alt=&quot;限2至4个中文字/符&quot;&gt;<br /> &lt;span&gt;（b组）&lt;/span&gt; &lt;/p&gt;<br /> &lt;p&gt; 年龄：<br /> &lt;input type=&quot;text&quot; size=&quot;4&quot; datatype=&quot;uint&quot; nullable=&quot;false&quot; place=&quot;right&quot; group=&quot;a|b&quot;/&gt;<br /> （ab组） &lt;/p&gt;<br /> &lt;p&gt; 电话：<br /> &lt;input type=&quot;text&quot; datatype=&quot;mobile|tel&quot; nullable=&quot;false&quot; alt=&quot;请输入正确的电话号码&quot; group=&quot;b&quot;&gt;<br /> （b组） &lt;/p&gt;<br /> &lt;p&gt; 邮箱：<br /> &lt;input type=&quot;text&quot; datatype=&quot;email&quot; nullable=&quot;false&quot; /&gt;<br /> (没有组) &lt;/p&gt;<br /> &lt;p&gt;<br /> &lt;div class=&quot;btn&quot; id=&quot;btnA&quot;&gt;验证A组(div)&lt;/div&gt;<br /> &lt;div class=&quot;btn&quot; id=&quot;btnB&quot;&gt;验证B组(div)&lt;/div&gt;<br /> &lt;div class=&quot;btn&quot; id=&quot;btnAB&quot;&gt;验证AB组(div)&lt;/div&gt;<br /> &lt;div class=&quot;btn&quot; id=&quot;btnNull&quot;&gt;验证没有组(div)&lt;/div&gt;<br /> &lt;/p&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br />$(&quot;#btnA&quot;).click(function(){<br /> if(Verify.IsPass($(&quot;form&quot;),&quot;a&quot;)){<br /> alert(&quot;a组验证通过&quot;);<br /> }; <br />});<br />$(&quot;#btnB&quot;).click(function(){<br /> if(Verify.IsPass($(&quot;form&quot;),&quot;b&quot;)){<br /> alert(&quot;b组验证通过&quot;);<br /> }; <br />});<br />$(&quot;#btnAB&quot;).click(function(){<br /> if(Verify.IsPass($(&quot;form&quot;),&quot;a|b&quot;)){<br /> alert(&quot;ab组验证通过&quot;);<br /> }; <br />});<br />$(&quot;#btnNull&quot;).click(function(){<br /> if(Verify.IsPass($(&quot;form&quot;))){<br /> alert(&quot;没有分组的控件验证通过&quot;);<br /> }; <br />});<br />&lt;/script&gt;<br /> &lt;/form&gt;</pre>
<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>
</fieldset>
</div>
<h3>3、通过Ajax回调，手动显示错误提示</h3>
<div class="desc">
<p>注意，Ajax的调用必须是在http状态下。</p>
<fieldset>
<pre>&lt;p&gt; 姓名：<br /> &lt;input name=&quot;name2&quot; type=&quot;text&quot; size=&quot;6&quot;
datatype=&quot;chinese&quot; place=&quot;right&quot; lenlimit=&quot;2-4&quot; alt=&quot;请输入中文&quot;&gt;<br /> &lt;span&gt;（限中文）&lt;/span&gt; &lt;/p&gt;<br /> <br /> &lt;p&gt;<br /> &lt;div class=&quot;btn&quot; id=&quot;btnGet&quot;&gt;验证表单(div)&lt;/div&gt;<br /> &lt;/p&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br />$(&quot;input[name=button2]&quot;).click(function(){<br /> $.get(&quot;1-1.htm&quot;,function(){<br /> <strong>Verify.ShowBox($(&quot;input[type=text][name=name2]&quot;),&quot;姓名已经存在&quot;);</strong><br /> });<br />});<br />&lt;/script&gt;</pre>
<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">
$("#btnGet").click(function(){
$.get("1-1.htm",function(){
Verify.ShowBox($("input[type=text][name=name2]"),"姓名已经存在");
});
});
</script>
</fieldset>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink