<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery-validate-src.js"></script>
<script type="text/javascript" src="jquery-datePicker-src.js"></script>
<script type="text/javascript">
$(function(){
//日期控制,未完 jquery-datePicker-src.js
$("#from").datePicker();
$("#submi").click(function(e){
// 被动验证表单
$("#form").validForm();
});
$("#reset").click(function(){
// 关闭所有的提示块
$("#form").tootipFadeOut();
});
$("#form").validate({
// 有input后面添加,暂时意思不大
// after:"<div class=\"warnValidate\">22222222222222222</div>",
// 自定义 message
// message : {required: "必选字段22{0}22"},
//提示块的偏移量
offsetX : 85,
offsetY : -15
// 未通过验证后执行的方法,,如果使用将替换默认的显示提示块
/* falseFun:function(input){
alert("cccc sss "+e);
},
*/
// 通过验证后执行的方法,如果使用将替换默认的隐藏提示块
/* trueFun:function(input){
}
*/
});
})
</script>
<style>
/* 验证的CSS */
.warnValidate {
position: absolute;
border:3px solid red;
border-radius:5px;
margin :3px; padding : 1px;
background-color: #FF9D00;
display:none;
}
/* 日期控件CSS*/
.day{
text-align: center;
}
.shangYue{
color: #CCCCCC;
}
.xiaYue{
color: #CCCCCC;
}
</style>
</head>
<body>
value: <input id="content" type="text" size="50"/> 失去焦点Input的value
<br/>
validate: <input id="rule" type="text" size="50" /> 失去焦点Input的validate属性
<form id="form">
<!-- 改变表单位置,测试提示块是否在input旁边显示 -->
<table style="padding: 30px 0px 0px 150px;">
<tr>
<td style="height:35px;">
<label>1</label>
</td>
<td style="height:35px;">
<input id="1" type="text" value="该表单没有validate属性,所以不验证" size="40" />
</td>
</tr>
<tr>
<td style="height:35px;">
<label>2minlength</label>
</td>
<td style="height:35px;">
<input id="2" type="text" validate="{required:true,minlength:2,date:true}" value="2014-08-18" size="40" />
</td>
</tr>
<tr>
<td style="height:35px;">
<label>3maxlength能</label>
</td>
<td style="height:35px;">
<input id="3" type="text" validate="{required:true,maxlength:5,max:10}" size="40" />
</td>
</tr>
<tr>
<td style="height:35px;">
<label>4</label>
</td>
<td style="height:35px;">
<input id="4" type="text" validate="{required:true,rangelength:[2,5]}" value="4" size="40" />
</td>
</tr>
<tr>
<td style="height:35px;">
<label>required</label>
</td>
<td style="height:35px;">
<textarea id="5_required" validate="{required:true}"></textarea>
</td>
</tr>
<tr>
<td style="height:35px;">
<label>6_remote</label>
</td>
<td style="height:35px;">
<textarea id="6_remote" name="6_remote" validate="{required:true,remote:'remote-true.json'}"></textarea>远程数据是假的,存在remote-true.json文件
</td>
</tr>
<tr>
<td style="height:35px;">
<label>7_equalTo</label>
</td>
<td style="height:35px;">
<textarea id="7_equalTo" name="7_equalTo" validate="{equalTo:'#6_remote'}"></textarea>
</td>
</tr>
</table>
<label>another</label><input id="5" type="text" validate="{required:true,email:true}" value="[email protected]"/><br/>
<input type="submit" value="提交"/> <b> type="submit" 显示验证未通的消息块</b>
<br/><input id="reset" type="reset" value="重置"> <b> type="reset" 重置并隐藏验证未通的消息块</b>
</form>
<a id="submi" href="#" onclick="return false;">A标签提交</a> <b> A标签的单击事件触发</b>
<hr/>
<div id="ddddd"></div>
</body>
</html>
练习-基于jquery的表单验证控件
5星 · 超过95%的资源 需积分: 9 8 浏览量
2014-08-25
17:10:59
上传
评论 1
收藏 40KB ZIP 举报
Zeus
- 粉丝: 62
- 资源: 41
最新资源
- 基于matlab实现眼部判别的疲劳检测系统+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 基于Matlab的异常姿势识别系统+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 隐藏文件展示工具,用来展示被病毒隐藏的文件
- 基于Matlab的图像分割系统+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 基于MATLAB指纹门禁GUI设计源码+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 基于Matlab的仪表指数识别系统霍夫曼变换+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 基于MATLAB 的霍夫曼变换答题卡识别带GUI界面+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 基于MATLAB 疲劳驾驶检测专识别GUI源码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 基于matlab的虫害侵蚀系统带Gui界面+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计)
- 基于Matlab的教室人数统计系统 可以统计正脸情况下的人数+源代码+全部数据+文档说明+详细注释+使用说明+截图(高分课程设计
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈