<!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 基础的更多相关文章

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

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

  2. jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)

    最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

  3. jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  4. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  5. 表单验证插件jquery.validate的使用方法演示

    jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...

  6. 【JQ成长笔记】jQuery Validate验证插件

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

  7. MVC的验证 jquery.validate.unobtrusive

    jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js) 2013-07-22 19:07 4568人阅 ...

  8. jquery.validate和jquery.form配合实现验证表单后AJAX提交

    基础代码其实很简单,之后一点一点扩充.最终代码写在最后. 表单: <form action="@Url.Action("AddColumns","Cont ...

  9. Jquery Validate结合QTip实现绚丽的表单验证

    相信做过前端开发的童鞋,一定都涉及到表单验证的模块设计,也定都会对Alert的粗暴提示厌恶至极.当然,我也不例外.一直期待着,一种比较优雅提示效果. 看到这,大家可能觉得Jquery Validate ...

随机推荐

  1. Oracle 11g 修改字符集 为 ZHS16GBK

    方法一:sqlplus “用户/密码 as sysdba” sqlplus “sys/sys as sysdba”  方法二:sqlplus/nolog SQL> conn /as sysdba ...

  2. Python 学习---------Day5

    第十四章 文档 class employee: "class doumentation" pass print employee.__doc__ #注释会保存在__doc__属性中 ...

  3. Alpha、Beta、RC、GA版本的区别 ZT

    http://www.blogjava.net/RomulusW/archive/2008/05/04/197985.html Alpha:是内部测试版,一般不向外部发布,会有很多Bug.一般只有测试 ...

  4. Excel里内嵌在线翻译

    本来寻思着继续写点系统运行日志跟踪技术的,但早晨哥家领导从单位打来电话,让帮助她的闺蜜搞一个excel翻译的问题,总部IT搞不定.我过去是用excel做了几年工作,却都是些数学计算,跟翻译也扯不上啊: ...

  5. GridView里的文本框改变事件

    <asp:TemplateField HeaderText="实收数量"> <ItemTemplate> <asp:TextBox ID=" ...

  6. 【转】【Linux】 临界区,互斥量,信号量,事件的区别

    原文地址:http://blog.itpub.net/10697500/viewspace-612045/ Linux中 四种进程或线程同步互斥的控制方法1.临界区:通过对多线程的串行化来访问公共资源 ...

  7. 技术文档--studio技术文档

    1.Google推出的毫无疑问,这个是它的最大优势,Android Stuido是Google推出,专门为Android“量身订做”的,是Google大力支持的一款基于IntelliJ IDEA改造的 ...

  8. velocity导出word报错解决

  9. .net 第二周学习

    这周更进一步的介绍了.net,通过作业的练习,有那么一点点的成就感,相对于前端,成就感还不是很大,但是我还是会继续加油  学习.net,看着他们周末只能呆在寝室写网页,顿时我就高兴了:        ...

  10. libj 0.8.2 发布,Java/JavaScript API 的 C++ 实现

    libj 0.8.2 增加了一些新的字符串相关的方法. libj 是一个跨平台的运行库,相当于提供了类似 Java/JavaScript API.libj 的内存管理是自动的,基于 shared_pt ...