97 lines
3.4 KiB
HTML
97 lines
3.4 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" />
|
||
<style type="text/css">
|
||
fieldset
|
||
{
|
||
width: 500px;
|
||
position: relative;
|
||
}
|
||
.imgBox
|
||
{
|
||
position: absolute;
|
||
float: right;
|
||
top: 10px;
|
||
right: 10px;
|
||
width: 200px;
|
||
}
|
||
.imgBox .fileinput
|
||
{
|
||
width: 100%;
|
||
}
|
||
span
|
||
{
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div>
|
||
/*!<br />
|
||
* 主 题：《表单录入验证》<br />
|
||
* 说 明：通过控件属性实现验证，包括生成星号标注、非法提示等；<br />
|
||
* 功能描述：<br />
|
||
* 1、当录入框必填时，在控件后生成红色星号（设置star=false时不显示星号）；<br />
|
||
* 2、根据控件属性判断需要录入的数据格式，如果非法则阻止提交并弹出提示<br />
|
||
* 3、支持分组验证<br />
|
||
* 4、可脱离微厦在线学习系统独立使用（需要JQuery库支持）<br />
|
||
*<br />
|
||
* 作 者：微厦科技_宋雷鸣_10522779@qq.com<br />
|
||
*/</div>
|
||
<fieldset>
|
||
<legend>验证控件使用示例</legend>
|
||
<form onsubmit="alert('验证成功');return false;">
|
||
<p>
|
||
账号：
|
||
<input name="" type="text" nullable="false" datatype="user" />
|
||
</p>
|
||
<p>
|
||
姓名：
|
||
<input name="" type="text" size="6" datatype="chinese" lenlimit="2-4" alt="限2至4个中文字/符"><span>（限中文）</span>
|
||
</p>
|
||
<p>
|
||
年龄：
|
||
<input type="text" size="4" datatype="uint" nullable="false" place="right" />
|
||
</p>
|
||
<p>
|
||
电话：
|
||
<input type="text" datatype="mobile|tel" alt="请输入正确的电话号码">
|
||
</p>
|
||
<p>
|
||
邮箱：
|
||
<input type="text" datatype="email" />
|
||
</p>
|
||
<p>
|
||
学历：
|
||
<select name="select" style="height:25px" nullable="false" alt="请选择学历" place="right">
|
||
<option value="">--请选择--</option>
|
||
<option value="5">硕士</option>
|
||
<option value="4">本科</option>
|
||
<option value="3">专科</option>
|
||
<option value="2">中学</option>
|
||
<option value="1">小学</option>
|
||
</select>
|
||
</p>
|
||
<p>
|
||
<input type="submit" name="button" class="button" value="验证表单" verify="true" />
|
||
</p>
|
||
<div class="imgBox">
|
||
照片：<br />
|
||
<img src="" width="100" height="100" class="photo" /><br />
|
||
<input name="" type="file" fileallow="jpg|png" class="fileinput" />
|
||
<br />
|
||
<span>（仅限jpg、png图片）</span>
|
||
</div>
|
||
</form>
|
||
</fieldset>
|
||
<p> </p>
|
||
<p>下载地址：<a href="https://github.com/weishakeji/Verify_Js" target="_blank">https://github.com/weishakeji/Verify_Js</a></p>
|
||
|
||
</body>
|
||
</html>
|