`
- 浏览:
231826 次
- 性别:
- 来自:
广州
-
Jquery-validation表单验证使用方法
作用
jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持。
使用前的布置
说明:需要JQuery版本:1.2.6+
步骤:
要导入相应的jQuery.js与jquery.validate.js文件
<script type="text/javascript" src="${ctx}/js/jquery.validation/jquery.validate.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.validation/messages_cn.js"></script>
在相应的字段上指定验证规则
名称 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必须要输入数据
指定要对表单进行验证
<script type="text/javascript">
$(function(){
$("#testForm").validate();
});
</script>
基础知识
指定验证规则的方式
把验证规则写到字段元素的class属性中
例:
名称 * <input type="text" name="loginName" class="required"><br>
密 * <input type="password" name="password" class="required"><br>
再次输入 <input type="password" name="password2"
class="{equalTo: '[name=password]'} required"><br>
生日 <input type="text" name="birthday" class="dateISO"><br>
E-mail *<input type="text" name="email" class="email"><br>
PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">
说明:
如果使用class="{key:value,…}"的方式,必须引入:jquery.metadata.js
表单字段的name不能重复,否则所配置的验证不起作用。
调用validate()方法时传递字段的验证规则
[color=red]$(function() {
$("#testForm").validate({
rules: {
loginName:{
required: true,
minlength: 2
} ,
password: {
required: true
},
password2: {
equalTo: "input[name=password]"
}
}
});
});
内置的验证规则
required:true
必填字段
remote:"check.php"
使用ajax方法调用check.php验证输入值
email:true
必须输入正确格式的电子邮件
url:true
必须输入正确格式的网址
date:true
必须输入正确格式的日期
dateISO:true
必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性
number:true
必须输入合法的数字(负数,小数)
digits:true
必须输入整数
creditcard:
必须输入合法的信用卡号
equalTo:"#field"
输入值必须和$(“#field”)相同
accept: "gif|png|jpg"
输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开
maxlength:5
输入长度最多是5的字符串(汉字算一个字符)
minlength:3
输入长度最小是3的字符串(汉字算一个字符)
rangelength:[5,10]
输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10]
输入值必须介于 5 和 10 之间
max:5
输入值不能大于5
min:10
输入值不能小于10
说明:
remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。在访问指定的url时,会自动把当前字段的值做为参数(以字段name为key)传递过去。
某些属性值中的引号不能省略,否则出错。如accept、equalTo等。
remote使用时遇到的问题:添加用户时需要验证用户名是否存在,当添加上一个用户后,在不离开该页面的情况下,再次添加该用户名的用户,validate不能提示该用户已存在,因为缓存的原因,jquery仍认为该用户名可用。解决方法是在页面中添加:$().ready(function(){
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
}); // 关闭缓存功能
});
添加
修改错误信息提示位置:
修改Jquery validate 的错误提示位置,把错误提示在input内,当获得鼠标焦点的时候清楚提示信息。
具体使用方法:
var validator = $("#myContainerForm").validate({
focusCleanup:true,//clear the error message when the error element get focus again.
onkeyup:false,
errorPlacement: function(error, element) {
showErrorMesssgeDiv(error,element);
},
rules:{
name:{
required: true
}
},
messages: {
name:{
required:populateErrorMessage($("#errorRequiredMessage").val(), $("#containerNameTitle").val())
}
}
});
自定义验证规则
除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为:
jQuery.validator.addMethod("name",function,message)
其中:
name为验证规则的名称
function定义验证的规则。参数有?。返回值为?。
message是验证失败时的提示信息。
指定错误提示内容
更改默认的提示内容
jQuery.extend(jQuery.validator.messages, {
required: "必填字段",
remote: "请指定一个不重复的值",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
个别表单改变提示内容(只对当前表单有效)
方法一:
<input type="file" name="parResource"
class="{required: true, accept: 'zip', messages: {required: '请选择文件', accept:'请选择正确的文件'}}">
方法二:
$(function() {
$("#testForm").validate({
messages:{
loginName: {
required: "必选字段2"
},
email: {
required: '必选字段22',
email: "请输入正确格式的电子邮件2"
}
}
});
});
改变错误消息显示样式
指定label.error的样式就可以了,如下:
<style type="text/css">
label.error{
margin-left: 10px;
color: red;
}
</style>
说明:label.error指class为error的label元素,如:<label for="resource" class="error">
扩展使用
怎么让错误提示信息显示到指定的位置
validation表单验证插件.doc[/color]
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
表单验证JQ插件jquery-validation.js
jQuery-Validation-Engine-master非常好的jquery验证表单控件
jquery-validation-1.9.0是一款优秀的form表单验证插件,此资源主要为某篇博客服务,如有需要还请下载。整个压缩包无法上传,有需要请留言
jquery-validation是基于jQuery的一款表单验证的插件,独特的验证样式非常新颖
jquery-validation 需要表单验证的js jquery.validate.js jquery.metadata.js jquery.validate.messages_cn.js
jquery-validation-1.9.0,内有详细示例demo
前端表单验证插件 基于jQuery
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。
jQuery-Validation-Engine-master
前端项目-jQuery-Validation-Engine,jquery验证引擎是一个javascript插件,旨在验证浏览器中的表单字段(即6-8、Chrome、Firefox、Safari、Opera 10)。这个插件提供了视觉上吸引用户注意的提示。
jQuery+Validation表单验证
Validation Engine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
表单验证插件 基于策略的表单验证,方便扩展。 使用 只需在jquery后引入jquery.validation文件 [removed][removed] [removed][removed] 初始化 使用自定义属性data-validate进行初始化 <input type="text" name=...
jQuery验证引擎是一个Javascript插件,旨在验证浏览器(IE 6-8,Chrome,Firefox,Safari,Opera 10)中的表单字段。 该插件提供了吸引人的视觉提示,吸引了用户对主题的关注。 验证范围从电子邮件,电话和URL到更...
与 Laravel 表单生成器一起使用 可以从控制器设置验证规则 可以区分数字输入和字符串输入 支持用户友好的输入名称 安装 在 composer.json 中需要bllim/laravel-to-jquery-validation并运行composer update 。 { ...
jQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
jQuery Validation Engine v2.6.2的Ciaoca中文增强版,更多介绍见:http://code.ciaoca.com/jquery/validation-engine/