jQuery插件之validate
一、jQuery.validate.js插件用于对表单输入进行验证，其使用配置非常简单。支持多事件触发，自带多种验证规则，还支持自定义验证规则。
1、配置方法。
先导入jQuery库，然后导入Validate插件，如果是中文提示还需要导入messages_zh.js。
注意Validate的导入要在jQuery库之后。代码如下：
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="messages_zh.js" type="text/javascript"></script>
然后只要定义验证规则和指定错误提示位置就可以了。
在$(document).ready()里加入验证规则与错误提示位置，代码如下：
JS代码：
<script type="text/javascript">
$(function () {
$("#form1").validate({
/*自定义验证规则*/
rules:{
username:{ required:true,minlength:6 },
userpass:{ required:true,minlength:10 }
},
/*错误提示位置*/
errorPlacement:function(error,element){
error.appendTo(element.siblings("span"));
}
});
})
</script>
HTML代码：
<form id="form1" action="#" method="post">
<p>用户登录</p>
<p>名称:<input id="txtName" name="username" type="text" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
<p>密码:<input id="txtPass" name="userpass" type="password" class="txt" /><span style="color:Red;font-size:10px;"></span></p>
<div>
<input id="btnLogin" type="button" value="登录" class="btn" />
<input id="btnReset" type="button" value="取消" class="btn" />
</div>
</form>
这样就完成了非常简单的表单验证功能，当表单填写不正确时Validate在<input>的兄弟<span>元素里显示错误提示。
2、说明：jQuery.validate.js插件与<input>的关联使用的是表单的name属性。只有存在name属性的<input>才能验证！
二、自定义错误提示位置，当我们想设置错误提示的显示位置怎么设置呢？
答案就是在errorPlacement参数里，你可以按照自己的需要自定义书写，用的是jQuery
/*错误提示位置*/
errorPlacement:function(error,element){ //第一个参数是错误的提示文字，第二个参数是当前输入框
error.appendTo(element.siblings("span")); //用的是jQuery，这里设置的是，错误提示文本显示在当前文本框的兄弟span中
}
三、自定义错误提示信息，例如当我们有多个require:true选项，我想根据不同的选项设置不同的提示怎么办呢？
答案就是在messages参数里。用层层嵌套的方式设置自己需要的提示信息。如果某个字段没有message信息，这时才调用默认的提示信息。
messages: {
UserName: {
required: "请输入用户名！" //注意，同样是必填项，但是优先显示在messages里的提示信息
},
Email:{
required:"请输入邮箱地址!" //不会统一输出 必填字段 了哦
}
}
实际上，jQuery.Validate默认的错误提示是生成一个class=error的label，所以，如果想设置样式，最简单的方法就是针对这个label设置就OK了，当然默认的label是可以手动更改的。
四、当需要ajax异步验证时，只需要用到remote即可，注意后台返回的JSON只能够是true或false。
以下给出一个综合示例，前台HTML代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>表单验证插件</title>
<script src="/Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="/Scripts/messages_zh.js" type="text/javascript"></script>
<script src="/Scripts/validates.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#form1").validate({
rules: {
UserName: { required: true, minlength: 3, maxlength: 18, remote: "/Home/CheckUserName" },
Email: { required: true,email:true },
UserPassword: { required: true ,minlength: 6 },
Mobile: { required: true, number:true },
IdCard: { required: true,isIdCardNo: true },
Age: { required: true ,number:true,min:1,max:100 }
},
messages:{
UserName: {
required: "请输入用户名！",
minlength: "用户名长度最少需要3位！",
maxlength: "用户名长度最大不能超过18位！",
remote: "此用户名已存在！"
},
Email: {
required: "请填写邮箱",
email: "请输入正确的邮箱格式"
},
UserPassword: {
required: "请填写你的密码!",
minlength: "密码长度不能小于6位"
},
Mobile: {
required: "请填写你的手机号码",
number:"手机号码只能为数字"
},
IdCard: {
required: "请输入身份证号码！",
isIdCardNo:"请输入正确的身份证号码！"
},
Age: {
required: "请输入年龄!",
number: "请输入数字",
min: "年龄不能小于1",
max: "年龄不能大于100"
}
},
/*错误提示位置*/
errorPlacement: function (error, element) {
error.appendTo(element.parent());
}
})
})
</script>
</head>
<body>
<form id="form1" method="post" action="">
<div>
<p> 用户名:<input type="text" value="" name="UserName" /> </p>
<p> 密码:<input type="password" value="" name="UserPassword" /> </p>
<p> 邮箱:<input type="text" value="" name="Email" /> </p>
<p> 手机号码:<input type="text" value="" name="Mobile" /> </p>
<p> 身份证号码:<input type="text" value="" name="IdCard" /> </p>
<p> 年龄:<input type="text" value="" name="Age" /> </p>
<p> <input type="submit" id="btn1" value="提交"></p>
</div>
</form>
</body>
</html>
后台控制器代码:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
} [HttpGet]
public ActionResult CheckUserName()
{
string username = HttpContext.Request.QueryString["username"];
bool succeed = true;
if (username == "admin")
{
succeed = false;
}
return Json(succeed, JsonRequestBehavior.AllowGet);
}
}
最重效果如下图所示
附上源代码：源代码
jQuery插件之validate的更多相关文章
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- jquery.validate.js校验select2解决方案,Jquery插件select2校验解决方案
jquery.validate.js校验select2解决方案 Jquery插件select2校验解决方案 >>>>>>>>>>>&g ...
- 使用jquery插件validate制作的表单验证案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery插件 -- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
- 什么？你还不会写JQuery 插件
前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论 ...
- 写JQuery 插件 什么？你还不会写JQuery 插件
http://www.cnblogs.com/Leo_wl/p/3409083.html 前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui ...
- jquery插件-表单验证插件
JQuery 插件概述: 插件(plugin)也被成为扩展,是一种遵循一定规范的应用程序编写出来的程序,JQuery有大量 现成的插件. 一句话,JQuery插件就是别人依照Jquery官方规范写好的 ...
- 第7章 jQuery插件的使用和写法
第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...
- 三、jQuery--jQuery插件--jQuery插件——Validation Plugin
简介: 客户端验证:现代网站填写表单时,几乎一定会采用的方式. 优点:1.可以减少服务器压力 2.缩短用户等待时间和提升用户体验 jQuery有很多表单验证插件:https://plugins.jqu ...
随机推荐
- bitmap 内存溢出OOM的解决办法分享
昨天遇到这个问题就是从一个输入流里调用BitmapFactory.decodeStream(this.getContentResolver().openInputStream(uri))得到一个bit ...
- 4Sum 解答
Question Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c ...
- javascript运算符整理
说起运算符,基本上各类编程语言中都会涉及,使用方法大同小异.今天在这里以javascript做简单的整理. 总得来说运算符还是比较的多,大致可以分为以下几种类型: 一元运算符 位运算符 布尔运算符 乘 ...
- MSDN中HttpWebRequest/HttpWebResponse用法
HttpWebRequest myReq = (HttpWebRequest)WebRequest.Create("http://home.cnblogs.com/u/weiweiboqi/ ...
- redis安装配置和使用;tomcat安装和使用
virtualbox主要有以下几种方式(不同版本号称法不一样,但实质是一样的): 1.Intelnal Network:利用主机上的全部的虚拟机构建一个虚拟网络 2.NAT:能訪问互联网,不能訪问主机 ...
- Spring (二) OOP V.S AOP
介绍 这是两种不同的编程思想就好比初中数学中学习的横纵坐标,一种是横向的一种是纵向,OOP是代表X轴而AOP代表Y轴,如下图: 数学几乎可以解释生活中所有的现象,无论是物体运动还是静止,也可以通过数学 ...
- 某APK中使用了动态注册BroadcastReceiver，Launcher中动态加载此APK出现java.lang.SecurityException异常的解决方法
在某APK中,通过如下方法动态注册了一个BroadcastReceiver,代码参考如下: @Override protected void onAttachedToWindow() { super. ...
- WebApplication和WebSite的区别
不同点 1. 创建方式不同 一个是FILE->NEW->PROJECT->ASP.NET WEB APPLICATION 另外一个是 FILE->NEW->WEBSITE ...
- C++菱形继承的构造函数
网上搜了很多,大多是关于菱形虚继承的构造函数应该怎么写,或者就是最简单的,四个类都不带参数的构造函数. 本文旨在记录一下困扰了博主1h的问题,非常浅显,有帮助固然好,如果侮辱谁的智商还见谅,当然无限欢 ...
- 关于bxslider在点击左右按钮之后不能自动切换的问题解决
bxslider很好,但是也弄了个很脑残的设置,每次点击左右按钮之后,就不能自动切换了,要重新点击下方播放的按钮,相当不好用.问度娘没能解决,但是发现一个论坛说要修改源码,这个也找了好久,没找到,问群 ...