jquery validate 使用示范
最近应公司要求做了一个jquery的示例文件，包括：模态窗口怎么实现；jquery validate下的校验；怎么做图片特效；怎么实现异步操作；实现图片上传剪切效果等很多特效；
这里把jquery校验的部分传上来与大家分享，直接复制出来就可以正常使用（没有后台异步校验没有意义，所以未上传，如有需要qq联系）
文中需要用到的jquery validate的文件做校验
有什么不明白的地方可以参考我的博文 jquery校验详解
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>validateDemo.html</title>
<meta http-equiv="keywords"
content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my
page">
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">
<!-- js校验开始 -->
<link rel="stylesheet" type="text/css"
href="../js/jQuery/validate/validation.css">
<script type="text/javascript"
src="../js/jQuery/jquery.js"></script>
<script type="text/javascript"
src="../js/jQuery/validate/jquery.validate.pack.js"></script>
<!--这个文件是通过addmethod新增加了几个方法，不会可以跳过，-->
<script type="text/javascript"
src="../js/jQuery/validate/additional-methods.js"></script>
<!-- 这里可以看到所有的校验规则 -->
<script type="text/javascript"
src="../js/jQuery/validate/messages_cn.js"></script>
<script type="text/javascript"
>
$(document).ready(function(){
//通过id查找要进行校验的表单
$("#signupForm").validate({
//设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。
//onsubmit:false,
//onfocusout:false,
//onkeyup:false,
//onclick:false,
//验证通过后执行的动作
//success:function(label){
//
label.text("ok!").addClass("success");
//},
//手动设置错误信息的显示方式
errorPlacement: function(error, element) {
error.appendTo(element.parent().next());
// if (
element.is(":radio") )
//
error.appendTo( element.siblings("span") );
// else if (
element.is(":checkbox") ){
//
error.appendTo ( element.siblings("span") );
// }
//
else
//
error.appendTo( element.parent() );
}
,
rules:{
username:{
required:
true,
rangelength:
[ 5, 7 ]
},
password:
{
required:
true,
minlength:
5
},
confirm_password: {
required:
true,
minlength:
5,
equalTo:
"#password"
},
sex: {
required:
true
},
email:
{
required:
true,
email:
true
},
language:
{
required:
true,
rangelength:[2,3]
},
book:
{
required:
true,
rangelength:[2,3]
},
agree:
"required",
upload:
{
required:
true,
accept:
"flv|jpg"
}
},
//校验提示信息
messages:
{
username:
{
required:
"请输入用户名",
rangelength:
"用户名长度必须为{0}到{1}个字符或汉字"
},
password:
{
required:
"请输入密码",
minlength:
"密码的最小长度是{0}个字符"
},
confirm_password: {
required:
"请输入确认密码",
minlength:
"确认密码的最小长度是{0}个字符",
equalTo:
"确认密码与密码不相等"
},
email:
"请输入正确的邮箱",
language:
{
required:
"该项必须填写",
rangelength:
"请您选择{0}到{1}项语言"
},
book:
{
required:
"该项必须选择",
rangelength:"请您选择{0}到{1}本书"
},
agree:
"您没有同意使用协议",
upload:
{
required:
"请输入上传文件的路径",
accept:
"上传文件的格式只能是 flv或jpg"
}
}
});
})
</script>
<!-- js校验结束 -->
</head>
<body
style="font-family:'宋体','Arial Narrow';
font-size:12px;
">
<!-- 表单校验功能 -->
<form class="cmxform" id="signupForm" method="get"
action="">
<fieldset >
<legend>字段校验、日历控件完整示例</legend>
<table>
<tr>
<td><label
for="username">Username</label></td>
<td><input
id="username" name="username"
/></td>
<!-- 这里设置的校验信息显示的地方在下一个td中，可以自行修改
-->
<td></td>
</tr>
<tr>
<td><label
for="password">Password</label></td>
<td><input
id="password" name="password" type="password"
/></td>
<td></td>
</tr>
<tr>
<td><label
for="confirm_password">Confirm
password</label></td>
<td><input
id="confirm_password" name="confirm_password" type="password"
/></td>
<td></td>
</tr>
<tr>
<td><label
for="sex">sex</label></td>
<td><pre><input
id="sex1" name="sex" type="radio"
/>男
<input id="sex2" name="sex" type="radio"
/>女</pre></td>
<td></td>
</tr>
<tr>
<td><label
for="email">Email</label></td>
<td><input id="email"
name="email"
/></td>
<td></td>
</tr>
<tr>
<td><label
for="upload">Upload</label></td>
<td><input type="file"
name="upload"
/></td>
<td></td>
</tr>
<tr>
<td><label
for="language">language</label></td>
<td><input
type="checkbox" name="language" value="cn"
/>汉语
<input type="checkbox" name="language" value="en"
/>英语
<input type="checkbox" name="language" value="jp"
/>日语
<input type="checkbox" name="language" value="ge"
/>德语
</td>
<td></td>
</tr>
<tr>
<td><label
for="book">book</label></td>
<td><select
name="book" multiple="multiple" >
<option
value="en">英语书</option>
<option
value="cn">汉语书</option>
<option
value="jp">日语书</option>
<option
value="ge">德语书</option>
</select></td>
<td></td>
</tr>
<tr>
<td><label
for="agree">同意该协议</label></td>
<td><input
type="checkbox" class="checkbox" id="agree" name="agree"
/>
</td>
<td></td>
</tr>
<tr>
<td><input
class="submit" type="submit" value="Submit"
/></td>
</tr>
</table>
</fieldset>
</form>
<!-- 表单校验结束 -->
</body>
</html>
jquery validate 使用示范的更多相关文章
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...
- ASP.NET MVC 5 Jquery Validate
ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- JS验证控件jQuery Validate
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
随机推荐
- kubernetes-控制器statefulset和Job（十三）
从前面的学习我们知道使用Deployment创建的pod是无状态的,当挂载了Volume之后,如果该pod挂了,Replication Controller会再启动一个pod来保证可用性,但是由 ...
- Angular项目下载启动
Angular cmdb-front 新建项目流程 打开idea New>Project 2,打开项目仓库,拷贝项目地址 拷贝项目路径,填写项目名 点击clone,然后一路Next 项目代码已 ...
- iOS提示框,为什么你应该使用 MBProgressHUD?
这是一篇带有一定笔者主观感情色彩的比较文章.文章着重对比github上最流行的两个iOS进度提示控件 MBProgressHUD 与 SVProgressHUD的各自优劣,来帮助初学者找到一个适合的i ...
- cordova-plugin-themeablebrowser 0.2.17 "ThemeableBrowser"ionic跳转外链插件在ios中heardBar会遮住内容的bug
ionic+angular的app项目中需要在App打开一个外部的url链接,用了这个插件发现在iPhone手机中会出现toolbar挡住url页面内容 解决方法: 在原有基础上加上statusBar ...
- 标签种类及CSS引入方法
标签种类及CSS引入方法 标签种类: 一:块级标签(block) ——> 独占一行,默认宽度与内容无关,宽高可设 (hr 块级标签) 二:行内块标签(inline-block) ——> ...
- arm-none-linux-gnueabi-gcc No such file or directory这个错误的解决方法
这个gcc可执行文件是32位的版本,而在64位系统上需要安装32位兼容包才可以运行正常 .用file命令查看这个文件得到: 解决办法: 安装ia32-libs sudo apt-get install ...
- 2019-04-11 python入门学习——配置机器及搭建开发环境
# 在windows操作系统中搭建python 3.x版本的开发环境,开发工具为 Anaconda 3. # 1.1 下载及安装Anaconda 3 Anaconda的特点:集成性高,包含很多常用的开 ...
- C语言字符篇（三）字符串比较函数
#include <string.h> int strcmp(const char *s1, const char *s2); 比较字符串s1和s2 int strncmp(const ...
- [Link-Cut-Tree][BZOJ2631]Tree
题面 Description: 一棵\(n\)个点的树,每个点的初始权值为\(1\).对于这棵树有\(q\)个操作,每个操作为以下四种操作之一: + u v c:将\(u\)到\(v\)的路径上的点的 ...
- WPF制作的小时钟
原文:WPF制作的小时钟 周末无事, 看到WEB QQ上的小时钟挺可爱的, 于是寻思着用WPF模仿着做一个. 先看下WEB QQ的图: 打开VS, 开始动工. 建立好项目后, 面对一个空荡荡的页面, ...