最近应公司要求做了一个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>

 
原文地址：http://blog.sina.com.cn/s/blog_608475eb0100oq0n.html

jquery validate 使用示范的更多相关文章

  1. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

  2. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  3. 修改 jquery.validate.js 支持非form标签

    尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...

  4. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  5. Jquery客户端校验——jquery.validate.js

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  6. jquery.validate不用submit而用js提交的例子

    $("#form").validate(); $("#btn).click(function(){ if($("#form").valid()){ $ ...

  7. ASP.NET MVC 5 Jquery Validate

    ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...

  8. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  9. JS验证控件jQuery Validate

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

随机推荐

  1. Ubuntu ndk环境变量配置

    https://blog.csdn.net/gulingfengze/article/details/70149092 用source /etc/profile,有些博客写的使用sudo gedit ...

  2. C/C++语言代码规范

    1.标识符名称: 标识符名称包括函数名.常量名.变量名等.这些名字应该能反映它所代表的实际东西,具有一定的意义,使其能 够见名知义,有助于对程序功能的理解.规则如下: 所有宏定义.枚举常数和const ...

  3. Python-三元运算符和lambda表达式

    一.三元运算符 #当满足条件1时,res=值1:否则res=值2 res = 值1 if 条件1 else 值2 举例说明: res=10 #简单的if else语句 if abs(res)>0 ...

  4. nginx架构分析之 模块化

    Nginx涉及到的模块分为核心模块.标准HTTP模块.可选HTTP模块.邮件服务模块以及第三方模块等五大类. 核心模块 核心模块是指Nginx服务器正常运行时必不可少的模块,它们提供了Nginx最基本 ...

  5. windows安装配置mongodb及图形工具MongoVUE

    解压安装包到D:\Program Files\mongodb 建立数据库目录 D:\Program Files\mongodb\data 建立日志目录 D:\Program Files\mongodb ...

  6. EL 和 JSTL 的使用

    EL Express Language 表达式语言 就是把<% 这里可以写java语言 %> 这种jsp的写法简化变为${ }的方式 例如 action="${pageConte ...

  7. ReplaceChar

    好吧,给个char的,替换单个字符.这样会快一些吧,这个是置换,连长度都不用了 bool ReplaceChar(char *str,const char src, const char dst){ ...

  8. HDU 1052 Tian Ji -- The Horse Racing(贪心)

    题目来源:1052 题目分析:题目说的权值匹配算法,有点误导作用,这道题实际是用贪心来做的. 主要就是规则的设定: 1.田忌最慢的马比国王最慢的马快,就赢一场 2.如果田忌最慢的马比国王最慢的马慢,就 ...

  9. DB设计工具——dbschema

      Preface       I've got a db design job about meeting room booking system last week.There're many s ...

  10. Mysql: pt-table-checksum 和 pt-table-sync 检查主从一致性，实验过程

    一.安装 percona 包 1.安装仓库的包 https://www.percona.com/doc/percona-repo-config/yum-repo.html sudo yum insta ...