ZhiYeJianKang_PeiXun/Song.Site/Utility/Verify/Demo/2-6.htm
2025-02-20 15:41:53 +08:00

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