JQuery插件Validation的使用-遁地龙卷风
第二版
(-1)写在前面
本文不是要详细说明Validation插件的使用，而是将满足开发需求的代码已最应该使用的方式写出来，并附有详细的注释
想要了解更多，去jquery的官网，有最新，最全面的,后续可能会写怎么从jquery官网获得信息的博文
(0)资源配置
官网的jar包:
lib 有该插件所支持的最高版本jquery ,使用更高版本可能会发生错误，例如Jquery3.0
dist\localization\messages_zh.js 可以让默认报错信息使用中文
导入的顺序
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<script type="text/javascript" src="jquery.validate.js" ></script>
<script type="text/javascript" src="messages_zh.js"></script>
(1)css代码
<body>
<form id="chatform">
姓名:<input type="text" size="50" name="name" id="name"/><br/>
密码:<input type="text" size="50" name="password" id="password"/><br/>
<!--上一版本的两个id值写成一样，导致了一些错误，抱歉'-->
<input type="submit" value="提交">
</form>
</body>
（2）js代码
$(function()
{
//添加自定义方法
$.validator.addMethod(
"test",
//value 表单元素的值,
//element,表单元素
//param 传的参数
function(value,element,param)
{
if(value == param)
return true;
return false;
},
//错误的提示信息
'请输入正确的密码'
)
//"#chatform" form表单
$("#chatform").validate({
rules:{
//name、password是元素的name属性值
name:{
required:true,
minlength:2
},
password:{
//调用自定义方法
test:"12345"
}
},
//自定义提示信息
messages:{
name:{
required:"必须填写",
minlength:"不能少于两个"
}
},
//用什么元素显示错误信息,必填
errorElement:"span",
//error 显示错误信息的元素，你获得了这个元素的控制权，你可以给它加背景图片、加个img标签等
success:function(error)
{
},
//error 显示错误信息的元素，你获得了这个元素的控制权，你可以给它加背景图片、加个img标签等
//element 触发错误信息的表单元素
errorPlacement: function(error, element)
{
//将error 放入到element后面 必须有
element.after(error);
}
})
});
JQuery插件Validation的使用-遁地龙卷风的更多相关文章
- JQuery data方法的使用-遁地龙卷风
(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...
- 三、jQuery--jQuery插件--jQuery插件——Validation Plugin
简介: 客户端验证:现代网站填写表单时,几乎一定会采用的方式. 优点:1.可以减少服务器压力 2.缩短用户等待时间和提升用户体验 jQuery有很多表单验证插件:https://plugins.jqu ...
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
- 推荐60个jQuery插件(转)
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
- JQuery simpleModal插件的使用-遁地龙卷风
(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jQuery插件之validation插件
前面的话 最常使用javascript的场合就是表单的验证,而jQuery作为一个优秀的javascript库,也提供了一个优秀的表单验证插件——Validation.Validation是历史最悠久 ...
- 【jQuery】学习jQuery插件的使用与写法（表单验证插件-validation）
最新最全的插件可以从jQuery官方网站的插件板块下载,网站地址为:http://plugins.jquery.com/ Validation优点:内置验证规则:自定义验证规则:简单强大的验证信息提示 ...
随机推荐
- SVN代码回滚
取消对代码的修改分为两种情况: 第一种情况:改动没有被提交(commit). 这种情况下,使用svn revert就能取消之前的修改. svn revert用法如下: # svn revert [ ...
- [Node.js] 使用TypeScript编写Node项目
原文地址:http://www.moye.me/2015/04/25/using_typescript/ 入 TypeScript 坑有一段时间了,由衷的看好,所以决定在自留地絮叨一番. 是什么 Ty ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十九】
<Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- 材价看板（1）- 如何建立你的第一个kanban，看看这些暴露的问题你们有没有？
今年负责一个老产品新团队,和几年前的指标组一样,现在的团队没有采用什么研发方法,于是我开始了团队的看板之旅. 12月22日给材价整个部门的产品研发相关人员做了一次kanban工作坊培训, 以及敏 ...
- Linux脚本，关闭服务器的所有tomcat并且重新启动
echo '开始查找tomcat进程' ID=`ps -fx | grep tomcat | awk '{print $1}'` echo $ID echo "开始结束tomcat进程&qu ...
- SQL Server安全（9/11）：透明数据加密（Transparent Data Encryption）
在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...
- Asp.net 加密解密类
namespace Wedn.Net { /// <summary> /// EncryptHelper 来′自? wedn.net /// </summary> public ...
- Android SDK Manager国内更新代理
在Android SDK Manager Setting 窗口设置HTTP Proxy server和HTTP Proxy Port这个2个参数,分别设置为: HTTP Proxy server:mi ...
- Unrecognized attribute 'targetFramework'. Note that attribute names are case-sensitive.
调试网站时,异常出现:Unrecognized attribute 'targetFramework'. Note that attribute names are case-sensitive. S ...
- ASP.NET Core Web API 开发-RESTful API实现
ASP.NET Core Web API 开发-RESTful API实现 REST 介绍: 符合REST设计风格的Web API称为RESTful API. 具象状态传输(英文:Representa ...