56 lines
3.6 KiB
HTML
56 lines
3.6 KiB
HTML
<!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" />
|
||
</head>
|
||
<body>
|
||
<h1>验证方式</h1>
|
||
<h2>概述</h2>
|
||
<div class="desc">
|
||
<p>默认的验证方式是点击按钮后<b>按顺序逐个验证</b>所在form表单内的所有控件，如果验证全部通过则触发form的submit事件，不通过则中断。</p>
|
||
<p>在实际工作中，用户希望<b>录入后即验证</b>，即控件失去焦点后立即进行验证，不必统一提交时验证。</p>
|
||
<p>可以通过设置form表单的patter属性为focus（默认为submit），即焦点模式。</p>
|
||
</div>
|
||
<h2>示例</h2>
|
||
<h3>1、提交表时验证</h3>
|
||
<p>默认的提交验证方式， form不用做任何设置。下例中年龄录入框做了失去焦点的验证。</p>
|
||
<fieldset>
|
||
<pre><form onsubmit="alert('验证成功');return false;"><br /> <p> 账号：<br /> <input name="" type="text" nullable="false" datatype="user" /><br /> </p><br /> <p> 年龄：<br /> <input type="text" size="4" datatype="uint" nullable="false"
|
||
place="right" <strong> patter="focus"</strong>/><br /> </p><br /> <p> 电话：<br /> <input type="text" datatype="mobile|tel" alt="请输入正确的电话号码"><br /> </p><br /> <p><br /> <input type="submit" name="button" class="button" value="验证表单" verify="true" /><br /> </p><br /> </form></pre>
|
||
<form onsubmit="alert('验证成功');return false;">
|
||
<p> 账号：
|
||
<input name="" type="text" nullable="false" datatype="user" />
|
||
</p>
|
||
<p> 年龄：
|
||
<input type="text" size="4" datatype="uint" nullable="false" place="right" patter="focus"/>
|
||
</p>
|
||
<p> 电话：
|
||
<input type="text" datatype="mobile|tel" alt="请输入正确的电话号码">
|
||
</p>
|
||
<p>
|
||
<input type="submit" name="button" class="button" value="验证表单" verify="true" />
|
||
</p>
|
||
</form>
|
||
</fieldset>
|
||
<h3>2、失去焦点即验证</h3>
|
||
<p>当form设置了 patter="focus"，所有控件在失去焦点时都会进行验证。</p>
|
||
<fieldset>
|
||
<pre><form <strong>patter="focus"</strong> place="right"><br /> <p> 账号：<br /> <input name="" type="text" nullable="false" datatype="user"/><br /> </p><br /> <p> 年龄：<br /> <input type="text" size="4" datatype="uint" nullable="false" /><br /> </p><br /> <p> 电话：<br /> <input type="text" datatype="mobile|tel" alt="请输入正确的电话号码"><br /> </p><br /> </form></pre>
|
||
<form patter="focus" place="right">
|
||
<p> 账号：
|
||
<input name="" type="text" nullable="false" datatype="user"/>
|
||
</p>
|
||
<p> 年龄：
|
||
<input type="text" size="4" datatype="uint" nullable="false" />
|
||
</p>
|
||
<p> 电话：
|
||
<input type="text" datatype="mobile|tel" alt="请输入正确的电话号码">
|
||
</p>
|
||
</form>
|
||
</fieldset>
|
||
</body>
|
||
</html>
|