jquery 验证控件
最近应公司要求做了一个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>
<head>
<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 验证控件的更多相关文章
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...
- (转)jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jQuery验证控件(转载)
转自:http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html 官网地址:http://bassistance.de/jquery ...
- jQuery验证控件jquery.validate.js的使用介绍
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- jQuery验证控件jquery.validate.js使用说明+中文API(转)
一导入js库<script src="../js/jquery.js" type="text/javascript"></script> ...
- jQuery验证控件jquery.validate.js汉化
如需要修改,可在js代码中加入: jQuery.extend(jQuery.validator.messages, { required: "必选字段", remote: &q ...
- 弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
- (转)[jQuery]使用jQuery.Validate进行客户端验证（初级篇）——不使用微软验证控件的理由
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
随机推荐
- CodeForces 622 A.Infinite Sequence
A.Infinite Sequence time limit per test 1 second memory limit per test 256 megabytes input standard ...
- 两年内从零到每月十亿 PV 的发展来谈 Pinterest 的架构设计（转）
原文:Scaling Pinterest - From 0 To 10s Of Billions Of Page Views A Month In Two Years 译文:两年内从零到每月十亿 PV ...
- Java Applet and ServiceLoader
http://stackoverflow.com/questions/14062813/java-applet-and-serviceloader
- C#操作Access的一些小结
C#操作Access的一些小结 好久没有写blog,感觉今年一年都没怎么真正开心过,整天有一些事围绕在身边,使心情难以平静下来,真正写点有意义的东西.博客园是天天看的,看得多,写的少,偶尔也是Copy ...
- 用c++库函数轻松解决回文问题
在<Accelerated C++>6.1学到的,这个解决回文问题的方案很简单,有必要把它记录下来. begin返回一个迭代器,它会从容器的最后一个元素开始,并且从后向前地逆序访问容器.e ...
- C++11类型推导
[C++11类型推导] auto 关键字.这会依据该初始化子(initializer)的具体类型产生参数: 除此之外,decltype 能够被用来在编译期决定一个表示式的类型. 参考:http://z ...
- 如何在Centos上安装python3.4
Centos上面默认的Python版本是2.6,本文介绍如何安装3.4版本. 0.下载前准备 需要安装以下库,不然会有问题. yum -y install zlib-devel bzip2-devel ...
- CentOS安装配置VSFTP服务器
{:toc} 前言 本文用最简单的方式创建FTP服务,即创建一个大家都可以访问的目录,没有涉及到各种权限限制. 创建目录 在安装配置ftp之前,首先创建一个目录,用来做ftp根目录.我创建的是/hom ...
- P67、H67、H61、P55、H57、H55 区别
Intel平台上我们现在已经有了LGA775.LGA1366.LGA1156三种封装接口,SNB还会带来两种,包括今天要看到的LGA1155(取代LGA1156),以及明年下半年的高端LGA2011, ...
- 用来用去还是觉得SDCMS好用
用来用去还是觉得SDCMS好用 现在可以算是精通了.呵呵,欢迎交流