94 lines
6.8 KiB
HTML
94 lines
6.8 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>通过设置datatype属性,验证录入的数据是否符合要求的数据类型。</p>
|
||
<p>如<input name="tm" type="text" <strong>datatype="uint"</strong>/> 设置datatype="uint",要求录入正整数。</p>
|
||
<p>可以验证的数据类型包括:数字、整数、电话、手机号、邮编、用户账号(限字母开头)、电子邮箱、身份证、网址、qq号、中文录入。</p>
|
||
<p>满足任一条件:datatype="tel|mobile",只要是电话(固话或手机号)都通过验证</p>
|
||
<p>满足全部条件:datatype="uint&zip",既是数字,且是邮编。</p>
|
||
</div>
|
||
<h2>示例</h2>
|
||
<h3>1、简单数据类型验证</h3>
|
||
<div class="desc">
|
||
<fieldset>
|
||
<pre><form onsubmit="alert('验证成功');return false;"><br /> <p> 姓名:<br /> <input name="" type="text" value="name" datatype="chinese" /><br /> (datatype="chinese",仅限中文字符)</p><br /> <p> 账号:<br /> <input name="" type="text" datatype="user" /> (datatype="user",字符或数字,且字符开头)<br /> </p><br /> <p> 年龄:<br /> <input name="" type="text" value="-1" datatype="uint" />(datatype="uint",整数)<br /> </p><br /> <p> 得分:<br /> <input name="" type="text" datatype="number" alt="请输入数字" />
|
||
(datatype="number",可以带小数,或负数)<br /> </p><br /> <p> 电话:<br /> <input name="" type="text" datatype="tel" />(datatype="tel")<br /> </p><br /> <p> 手机:<br /> <input name="" type="text" datatype="mobile" />(datatype="mobile")<br /> </p><br /> <p> 邮编:<br /> <input name="" type="text" datatype="zip" />(datatype="zip")<br /> </p><br /> <p> 邮箱:<br /> <input name="" type="text" datatype="email" />(datatype="email")<br /> </p><br /> <p> 身份证:<br /> <input name="" type="text" datatype="idcard" />(datatype="idcard")<br /> </p><br /> <p> QQ号:<br /> <input name="" type="text" datatype="qq" />(datatype="qq")<br /> </p><br /> <p> 公司网址:<br /> <input name="" type="text" datatype="url" />(datatype="url")<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" value="name" datatype="chinese" />
|
||
(datatype="chinese",仅限中文字符)</p>
|
||
<p> 账号:
|
||
<input name="" type="text" datatype="user" /> (datatype="user",字符或数字,且字符开头)
|
||
</p>
|
||
<p> 年龄:
|
||
<input name="" type="text" value="-1" datatype="uint" />(datatype="uint",整数)
|
||
</p>
|
||
<p> 得分:
|
||
<input name="" type="text" datatype="number" alt="请输入数字" />(datatype="number",可以带小数,或负数)
|
||
</p>
|
||
<p> 电话:
|
||
<input name="" type="text" datatype="tel" />(datatype="tel")
|
||
</p>
|
||
<p> 手机:
|
||
<input name="" type="text" datatype="mobile" />(datatype="mobile")
|
||
</p>
|
||
<p> 邮编:
|
||
<input name="" type="text" datatype="zip" />(datatype="zip")
|
||
</p>
|
||
<p> 邮箱:
|
||
<input name="" type="text" datatype="email" />(datatype="email")
|
||
</p>
|
||
<p> 身份证:
|
||
<input name="" type="text" datatype="idcard" />(datatype="idcard")
|
||
</p>
|
||
<p> QQ号:
|
||
<input name="" type="text" datatype="qq" />(datatype="qq")
|
||
</p>
|
||
<p> 公司网址:
|
||
<input name="" type="text" datatype="url" />(datatype="url")
|
||
</p>
|
||
<p>
|
||
<input type="submit" name="button" class="button" value="验证表单" verify="true"/>
|
||
</p>
|
||
</form>
|
||
</fieldset>
|
||
</div>
|
||
<h3>2、类型复合验证</h3>
|
||
<div class="desc">
|
||
<fieldset>
|
||
<legend>满足任一条件</legend>
|
||
<pre><form onsubmit="alert('验证成功');return false;"><br /> <p> 电话:<br /> <input name="" type="text" <strong>datatype="tel|mobile"</strong> 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" datatype="tel|mobile" alt="请输入电话号码" />
|
||
</p>
|
||
<p>
|
||
<input type="submit" name="button" class="button" value="验证表单" verify="true"/>
|
||
</p>
|
||
</form>
|
||
</fieldset>
|
||
<fieldset>
|
||
<legend>满足所有条件</legend>
|
||
<pre><form onsubmit="alert('验证成功');return false;"><br /> <p> 邮编:<br /> <input name="" type="text" <strong>datatype="uint&zip"</strong> /><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" datatype="uint&zip" />
|
||
</p>
|
||
<p>
|
||
<input type="submit" name="button" class="button" value="验证表单" verify="true"/>
|
||
</p>
|
||
</form>
|
||
</fieldset>
|
||
</div>
|
||
</body>
|
||
</html>
|