jQuery Validate验证框架使用
jQuery Validate使用前的准备，需要下载相应js包括：1、jquery.validate.min.js。2、additional-methods.min.js。
当然必不可少的js jQuery文件。
引入上面的js后开始使用，jv(jquery validate以下叫jv)有两种用法，先看第一种：
第一种就是直接在控件上用class的方式直接用，如：class="email"，这种方法如果想验证长度，好像不起效果，也可能是没研究出来。
jv的提示语默认是英文的，我们可以用内置方法把提示语换成我们想要的内容。
注意：使用前必须指定要验证的form。看代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq控件验证</title>
<script src="Script/jquery.min.js"></script>
<script src="jqvaldate/jquery.validate.min.js"></script>
<script src="jqvaldate/additional-methods.min.js"></script>
<script>
$(function () {
$("#myform").validate({
});
$.extend($.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("请输入一个最大为 {0} 的值"),
min: $.validator.format("请输入一个最小为 {0} 的值")
});
});
</script>
</head>
<body>
<form id="myform" method="post" action="">
<p>
<label for="email">E-Mail：</label>
<input id="email" calss="required email" />
</p>
<p>
<input class="submit" type="submit" value="立即注册" />
</p>
</form>
</body>
</html>
上面的代码就是在calss中用内置验证方法直接验证的方式。
来看一下第二种，在js中进行验证：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq控件验证</title>
<script src="Script/jquery.min.js"></script>
<script src="jqvaldate/jquery.validate.min.js"></script>
<script src="jqvaldate/additional-methods.min.js"></script>
<script>
$(function () {
$("#myform").validate({
focusInvalid: false,//验证无效时，是否有焦点响应
//指定验证成功后进行提交
submitHandler: function (form) {
form.submit();
},
//要验证的控件
rules: {
myname: {
required: true
},
email: {
required: true,
email: true
},
jia: {
required: true,
byteRangeLength: [3, 6]
}
},
//提示语
messages: {
myname: {
required: "必填"
},
email: {
required: "必填",
email: "E-Mail格式不正确"
}
}
});
//添加自定义验证
jQuery.validator.addMethod(
"byteRangeLength",
function (value, element, param) {
var length = value.length;
for (var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >= param[0] && length <= param[1]);
},
$.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")
);
//定义提示语
$.extend($.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("请输入一个最大为 {0} 的值"),
min: $.validator.format("请输入一个最小为 {0} 的值")
});
});
</script>
</head>
<body>
<form id="myform" method="post" action="">
<p>
<label for="myname">用户名：</label>
<input id="myname" name="myname" />
</p>
<p>
<label for="email">E-Mail：</label>
<input id="email" name="email" />
<input type="text" name="jia"/>
</p>
<p>
<input class="submit" type="submit" value="立即注册" />
</p>
</form>
</body>
</html>
以上代码就是在js中进行验证。
添加自定义验证的时候的三个参数分别为：验证名，要执行的函数(要执行的函数也有三个参数：val,element,param),要返回的值(可以格式化)。
简单的自定义验证添加：
$.validator.addMethod(
"lths", function (val, element, pms) {
if (val.length > pms.length ) {
return true;
}
else {
return false;
}
}
, $.validator.format("必须大于{0}个字节")); //在rules中调用的时候lths[6]
以下是通过验证和未通过验证的操作：
//没有通过验证的操作
highlight: function (element, errorClass) {
$(element).css("border-color", "red");
},
//通过验证的操作
unhighlight: function (element, errorClass) {
$(element).css("border-color", "");
}
jQuery Validate验证框架使用的更多相关文章
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- 【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- jQuery Validate验证框架与 jQuery ajaxSubmit的联合使用
jQuery Validate验证框架自定义验证 第一步导入导入js库 <script src="<%=basePath%>static/js/jquery.js" ...
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...
- jQuery Validate验证框架详解(jquery.validate.min.js)
原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...
- jQuery Validate验证框架详解(转)
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- jQuery Validate验证框架详解，提交前验证
现在都用h5表单进行验证了,以下方式仅做回忆 https://www.runoob.com/jquery/jquery-plugin-validate.html <!DOCTYPE HTML P ...
- 【转】jquery validate验证框架与kindeditor使用需二次提交的问题
原文:http://blog.csdn.net/wlsyn/article/details/11536399在使用jquery的验证框架对kindeditor富文本编辑器进行验证的过程中,发现提 交时 ...
- 【转载】jQuery Validate验证框架 + CKEditor 无法验证问题的解决方法
文章1:http://yangzhihuan.iteye.com/blog/717254 CKEDITOR.instances["page_content"].on("i ...
随机推荐
- 分布式缓存BeIT Memcached简介
分布式缓存BeIT Memcached简介 或许你还没有用到过分布式缓存,在web集群的情况下,它可以很好的让一部分常用数据常驻服务器内存而不用担心各台web不同步.下面稍微介绍一下beitmemca ...
- 谈谈分布式事务之二：基于DTC的分布式事务管理模型[下篇]
[续上篇] 当基于LTM或者KTM的事务提升到基于DTC的分布式事务后,DTC成为了本机所有事务型资源管理器的管理者:此外,当一个事务型操作超出了本机的范 围,出现了跨机器的调用后,本机的DTC需要于 ...
- MySQL优化技巧之五（mysql查询性能优化)
对于高性能数据库操作,只靠设计最优的库表结构.建立最好的索引是不够的,还需要合理的设计查询.如果查询写得很糟糕,即使库表结构再合理.索引再合适,也无法实现高性能.查询优化.索引优化.库表结构优化需要齐 ...
- [BILL WEI]stimulsoft reports DEMO自动生成模板
stimulsoft reports是一款强大的报表开发工具,能够开发各式各样的报表. 对于初学者而言,任何报表开发,刚开始都是去模仿,熟练掌握之后,自己才能独立开发,而在报表开发实际过程中, 我们所 ...
- 使用C#模拟ASP.NET页面中按钮点击
c# 模拟Asp.net页面中的某个按钮的点击,向web服务器发出请求 主要就组织要提交的数据,然后以post方式提交. 假设我们有如下的网页 1 <% @ Page Language = &q ...
- 如何从Windows Phone 生成PDF文档
我需要从我的Windows Phone应用程序生成PDF. 遗憾的是没有标准的免费的PDF生成库在Windows Phone上运行. 我不得不自己生成PDF,通过直接写入到文件格式. 这竟然是真的很容 ...
- 输入A和B，计算并输出A+B
EOF是一个预定义的常量,等于-1. 输入A和B,计算并输出A+B Sample input: 1 5 10 20 Sample output: 6 30 #include <iostr ...
- 【原创】Mac上编译Hadoop1.0.3出现的一些问题
create-native-configure: [exec] configure.ac:47: error: possibly undefined macro: AC_PROG_LIBTOOL [e ...
- AJAX中文乱码PHP完美解决(IE和Firefox兼容)
最近在做一个项目,遇到AJAX中文乱码问题,经过一个下午的努力终于完美解决,现将心得写下来,希望对那些还困绕在这个问题而头痛不已的人们有所帮助. 众所周知,使用AJAX传送和接收中文参数时,如果不在客 ...
- 问题.NETwebservice其他电脑无法使用-测试窗体只能用于来自本地计算机的请求
问题:webservice其他电脑无法使用-测试窗体只能用于来自本地计算机的请求 问题现象: 本地测试没有问题. 其他电脑打开webservice出现 测试窗体只能用于来自本地计算机的请求. 或者 & ...