官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation

Validate手册: http://www.cnblogs.com/chutianshu1981/p/3602184.html

效果图:

引入库:

<script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/jquery-validate.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/register.js"></script>

表单:

<form action="" method='post' name='regis'>
<p>
<label for="account">登录账号:</label>
<input type="text" name='account' id="account" autocomplete="off" />
</p>
<p>
<label for="pwd">登录密码:</label>
<input type="password" name='pwd' id="pwd"/>
</p>
<p>
<label for="pwded">确认密码:</label>
<input type="password" name='pwded' id='pwded'/>
</p>
<p>
<label for="uname">昵 称:</label>
<input type="text" name='uname' id="uname" />
</p>
<p>
<label for="verify">验证码:</label>
<input type="text" name="verify" id="verify" />
<img src="#" alt="验证码图片" class="verify" id="verify-img" title="点击更换" />
</p>
<p>
<input type="submit" value='立即注册' id='regis'/>
</p>
</form>

register.js文件:

$(function () {

    //jQuery Validate表单验证

    /**
* 添加验证方法: ok
* 以字母开头,5-17 位字母、数字、下划线"_"
*/
jQuery.validator.addMethod("ok", function(value, element) {
var account = /^[a-zA-Z][\w]{4,16}$/;
return this.optional(element) || (account.test(value));
}, '以字母开头,5-17 位字母、数字、下划线"_"'); $('form[name="regis"]').validate({ // 验证规则
rules:{
account:{ //form表单中input[name='account']元素的验证规则
required: true, //必须字段,不能为空
ok: true, //启用自定义验证规则'ok'
remote: { //异步验证
url: checkAccountUrl, //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
account: function() {
return $("#account").val().trim();
}
}
}
},
pwd:{
required: true,
ok: true,
},
pwded:{
required: true,
equalTo: '#pwd'
},
uname:{
required: true,
rangelength: [2, 10],
remote: {
url: checkUnameUrl,
type: "post",
dataType: "json",
data: {
uname: function () {
return $("#uname").val().trim();
}
}
}
},
verify:{
required: true,
remote: {
url: checkVerifyUrl,
type: 'post',
dataType: 'json',
data: {
verify: function () {
return $('#verify').val().trim();
}
}
}
}
}, // 提示消息
messages:{
account:{ //form表单中input[name='account']元素的提示信息
required: '账号不能为空', // 输入为空时提示
remote: '账号已存在' // 异步获得json数据为'false'时提示,也就是后台验证失败
},
pwd:{
required: '密码不能为空',
},
pwded:{
required: '请确认密码',
equalTo: '两次密码不一致'
},
uname:{
required: '请填写您的昵称',
rangelength: '昵称必须在{0}-{1}个字之间',
remote: '昵称已存在'
},
verify:{
required: '请输入验证码',
remote: '验证码有误'
}
}, // 错误标签元素
errorElement: 'span', // 错误提示位置
errorPlacement: function (error, element) { // error是错误信息的提示元素,element是当前input域
error.appendTo(element.parent()).prev('.success').remove(); //追加提示元素,去掉之前的成功元素
}, // 验证通过
success: function (span) { // span 是错误的提示元素
span.removeClass('error').addClass('success').siblings('.success').remove(); //追加成功样式,去掉错误样式和重复的成功样式
}
}); })

errorElement 的CSS样式:

input.error{ /*...*/ }     /* 输入框  的错误样式 */
input.valid{ /*...*/ } /* 输入框 的成功样式 */
span.error{ /*...*/ } /* 提示元素的错误样式 */
span.success{ /*...*/ } /* 提示元素的成功样式 */

 

jQuery Validate插件 验证实例的更多相关文章

  1. jQuery Validate 插件验证,,返回不同信息(json remote)自定义

    问题 申请账号需要确认该账号是存在 jquery.validate.js中的remote Jquery Ajax获取后台返回的Json数据后,添加自定义校验 解题思路:输入的登陆信息远程验证是否该账号 ...

  2. jQuery Validate 插件为表单提供了强大的验证功能

    之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...

  3. jQuery Validate插件实现表单强大的验证功能

    转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自 ...

  4. 前端验证,jquery.validate插件

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

  5. jQuery Validate 插件

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  6. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  7. jquery validate 插件使用小结

    项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...

  8. 【jQuery】(6)---jQuery validate插件

    jQuery  validate插件 一.导入js库                                      先导入jQuery库,然后导入Validate插件,如果是中文提示还需要 ...

  9. JQuery Validate插件与实现

    菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...

随机推荐

  1. css样式 一定要reset?

    有大神讲过了,直接看http://www.zhangxinxu.com/wordpress/?p=758

  2. XML-RPC协议学习

    XML-RPC调用包括2部分:客户端client(调用线程).服务器端server(被调用的线程).服务端是通过特定的URL获得的,调用过程如下: 1.客户端程序使用XML-RPC客户端发出作业请求, ...

  3. vue2.0 自定义时间过滤器

    html <td>{{serverInfo.serverTime| formatTime('YMDHMS')}}</td> js serverTime: new Date(). ...

  4. CentOS vi编辑器简单备忘

    1.常用编辑命令 dd 删除(剪切)光标所在整行 5dd 删除(剪切)从光标处开始的 5 行 yy 复制光标所在整行 5yy 复制从光标处开始的 5 行 n 显示搜索命令定位到的下一个字符串 N 显示 ...

  5. 未找到与约束ContractName Microsoft.VisualStudio.Text.ITextDocumentFactoryService...匹配的导出

    安装微软的windows补丁 KB2781514 ,补丁主要解决“在 .NET Framework 4.5 更新之后,Visual Studio 用户可能无法打开或创建 C++ 或 JavaScrip ...

  6. 【题解】Atcoder ARC#90 E-Avoiding Collision

    自己做出来固然开心,但是越发感觉到自己写题的确是很慢很慢了……往往有很多的细节反反复复的考虑才能确定,还要加油呀~ 这道题目的突破口在于正难则反.直接求有多少不相交的不好求,我们转而求出所有相交的.我 ...

  7. bzoj 3275: Number (最小割)

    题目的意思是要选一些数,但是这些数如果满足两个条件的话就不能一起被选. type arr=record toward,next,cap:longint; end; const maxn=; maxm= ...

  8. 《时间序列分析及应用:R语言》读书笔记--第一章 引论

    "春节假期是难得的读书充电的时间."--来自某boss.假期能写多少算多少,一个是题目中的这本书,另一个是<python核心编程>中的高级部分,再一个是拖着的<算 ...

  9. Codeforces Round #401 (Div. 2) A B C 水 贪心 dp

    A. Shell Game time limit per test 0.5 seconds memory limit per test 256 megabytes input standard inp ...

  10. mapper的前后缀

    1.<trim prefix="" suffix="" suffixOverrides="" prefixOverrides=&quo ...