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 ...
随机推荐
- CI框架中怎么传递大数据给PHP？
CI中怎么将HTML页面中的大数据(如富文本)通过CONTROLLER传递给MODEL中的函数?难道还是通过构造链接的形式传递吗?求指点.
- 记录Python学习中的几个小问题
记录Python学习中的几个小问题,和C#\JAVA的习惯都不太一样. 1.Django模板中比较两个值是否相等 错误的做法 <option value="{{group.id}}&q ...
- Debian使用相关
1)将普通用户添加到sudo组 首先安装sudo: root@~#: apt-get install sudo 然后添加将wzc用户添加到sudo组: root@~#: usermod -a -G s ...
- iOS和Android测试区别
1. Android长按home键呼出应用列表和切换应用,然后右滑则终止应用: 2. 多分辨率测试,Android端20多种,ios较少: 3. 手机操作系统,Andro ...
- 一台MySQL服务器启动多个端口
一台MySQL服务器启动多个端口 在测试Mysql多主一从服务器,即一个从服务器多端口同步不同主库.本文记录了开启不同端口的操作. 详细步骤: 1.首先要先把my.cnf配置文件复制一份,开几个端口要 ...
- H5、CSS3属性的支持性以及flex
一.项目中用到一个flex属性,但是应用了flex的父容器只设置了width,没有设置height,此时每一个应用了上面提到的属性的样式的div都重叠在了一起,在IE10,IE11出问题,IE9没有问 ...
- linux下 tar解压 gz解压 bz2等各种解压文件使用方法
http://alex09.iteye.com/blog/647128 大致总结了一下linux下各种格式的压缩包的压缩.解压方法. .tar 解包:tar xvf FileName.tar 打包:t ...
- [SystemC] Setting Up the Environment
My operating system is Ubuntu 12.04. 0. Checking Your Compilers First thing first, you will need the ...
- javascript基础知识-数组
1.javascript创建数组时无需声明数组大小或者在数组大小变化时重新分配 2.javascript数组是无类型的 3.数组元素不一定要连续 4.针对稀疏数组,length比所有元素的索引都要大 ...
- WPF控件经验小结：（1） ToolBar去掉右边箭头（扩展图标）
今天开发时,同事问我一个问题.怎么去除ToolBar右边扩展图标.我想了一下,说改Style.同事说太麻烦了.可不可以快速修正.我说应该动态去读取Template模板中的Style,然后隐藏.怎么实现 ...