jquery.validate 基础
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>
<script type="text/javascript">
$().ready(function() {
var validate= $("#signupForm").validate({
rules: {
firstname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
firstname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码",
minlength: "密码不能小于{0}个字 符"
},
confirm_password: {
required: "确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
}
},
//把错误信息放到一处处理与 errorPlacement 函数连用
groups:{
login:"firstname email password confirm_password"
},
errorPlacement:function(error,element){
error.insertBefore("#error_info");
},
//提交表单后焦点在第一个错误表单内
focusInvalid:true,
//指定错误提示的css类名
errorClass:"error_info",
//指定验证通过的css类名
validClass:"success_info",
//验证通过提交表单
submitHandler:function(form){
console.info("提交表单"+$(form).serialize());
},
invalidHandler:function(event,validator){
console.info("表单错误"+validate.numberOfInvalids());
},
// 取消某个元素的校验
ignore:"#firstname",
onfocusout:function(){
return false;
}
});
$("#check").click(function(){
var flag1=$("#signupForm").valid();//检查表单是否有效
var flag2=$("#firstname").rules();//查询元素的校验规则
var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则
var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则
var flag5=validate.form();//验证表单是否有效
var flag6=validate.element("#firstname");//验证表单某个元素是否有效
validate.resetForm();//恢复表单原来的状态
var flag7=validate.numberOfInvalids();//获得错误元素个数
console.info(flag7);
});
//针对某个元素显示特定的提示信息
validate.showErrors({
firstname:"ERROR"
});
});
</script>
</head>
<body>
<form id="signupForm" method="get" action="">
<p id="error_info">
<label for="firstname">Firstname</label>
<input id="firstname" name="firstname" />
</p>
<p>
<label for="email">E-Mail</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">Password</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
<p>
<input class="c" type="button" value="检查表单是否有效" id="check"/>
</p>
</form>
</body>
</html>
jquery.validate 基础的更多相关文章
- 修改 jquery.validate.js 支持非form标签
尝试使用markdown来写一篇blog,啦啦啦 源代码传送门:github 在特殊情况下我们使用jquery.validate.js对用户输入的内容做验证的时候,表单并不是一定包含在form之中,有 ...
- jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式（jquery.validate.unobtrusive.js）
最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...
- jQuery Validate 表单验证插件----Validate简介，官方文档，官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- 表单验证插件jquery.validate的使用方法演示
jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...
- 【JQ成长笔记】jQuery Validate验证插件
validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同 ...
- MVC的验证 jquery.validate.unobtrusive
jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js) 2013-07-22 19:07 4568人阅 ...
- jquery.validate和jquery.form配合实现验证表单后AJAX提交
基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...
- Jquery Validate结合QTip实现绚丽的表单验证
相信做过前端开发的童鞋,一定都涉及到表单验证的模块设计,也定都会对Alert的粗暴提示厌恶至极.当然,我也不例外.一直期待着,一种比较优雅提示效果. 看到这,大家可能觉得Jquery Validate ...
随机推荐
- Android 文章列表
Android --列表-- Android(1)-Handler Looper Message MessageQueuehttp://www.cnblogs.com/TS-qrt/articles ...
- linux c++循环缓冲区模板类
一:概述 实际学习和工作中,我们经常会遇到读写大量数据的情况,这个时候我们可能就用到了循环缓冲区. 循环缓冲区在处理大量数据的时候有很大的优点,循环缓冲区在一些竞争问题上提供了一种免锁的机制,免锁的前 ...
- office中通过宏添加快捷键
把“Microsoft 公式 3.0”作为一个按钮放在 2013中的快速访问工具栏的方法 在使用office办公软件的过程中,因为有的人还在使用office2003版本,所以在使用高版本的office ...
- 【Thinking in Java】编写构造器时应注意：尽量避免调用其他非private方法
最近重温了<Thinking in Java>,发现了一个让我为之兴奋的知识漏洞,必须得分享一下. 上一篇的<Java类初始化的过程>的随笔中,那个初始化顺序并不完整.初始化的 ...
- NFS 网络文件系统挂载在A8板子上
我承认自己是菜鸟,没什么网络知识就来搞挂载nfs网络文件系统,花费了5天的时间才把nfs网络文件系统成功挂载在A8板子上,实现了A8板子和虚拟机的文件共享.分享一下个人经验: 以下是基于nfs已经完成 ...
- MongoDB学习比较-07 C#驱动操作MongoDB
下载驱动 驱动的下载有两种方式:一种是在C#项目中通过NuGet进行安装,另一种是通过下面的链接:https://github.com/mongodb/mongo-csharp-driver/rele ...
- NY 325 zb的生日
假设所有西瓜重 Asum,所求的是用 Asum / 2 的背包装,最多装下多少. 刚开始用贪心作的,WA.后来用01背包,结果TLE,数据太大.原来用的是深搜! dfs(int sum, int i) ...
- SQL Server 2008 R2 下移动数据库的存储位置
使用场景:1. 该数据库增长的较大,存储磁盘空间不足: 2. 在特定情况下该数据库需要移动到另外一块磁盘上(呵呵...我的情况就是之前的磁盘要还给别人) 步骤: 1. 新建查询 SELECT na ...
- phpcms v9 标签含义整理
{template "content","header"} ---------- 调用根目录下phpcms\template\content\header ...
- WinAPI: GetKeyNameText - 根据键盘消息获取按键名称
; Canvas.Font.Style := [fsBold]; Canvas.Font.Color := clRed; Canvas.Brush.Color := clWhite;..] of ...