$("#form" ).validate({
event: "keyup" ,
//验证规则
rules:{
author:{
required:true,//必须字段
minlength:2 //至少两字节
},
email:{
required:true,
email:true //此字段为邮件地址
},
url:{
required:false,
url:true //此字段为网址
},
content:{
required:true,
minlength:4
}
},
//错误消息
messages:{
author: {
required: '用户名必须填写' ,
minlength: jQuery.format("名称至少{0}两个字节吧" )
},
email: {
required: '邮箱必须填写,做为联系方式' ,
email: '邮箱貌似不正确哦'
},
content: {
required: '网址必须填写' ,
minlength: jQuery.format("名称至少{0}两个字节吧" )
}
},
submitHandler: function (form) {
//ajax提交表单,需要jQuery.Form插件
$(form).ajaxSubmit({
dataType:'json' ,
success:function (res){
if (res.success){
$('.ajaxsubmit' ).html('发表成功!' ).addClass('ok' );
$('textarea' ).val('' );
$('#comments' ).prepend(res.msg);
}else
$('.ajaxsubmit' ).html(res.msg).addClass('fail' );
}
});
return false;
},
errorPlacement:function (error, element) {
//放置错误提示消息的Element
error.appendTo(element.parent ().find('b' ));
},
errorClass:'fail' ,//错误消息样式
highlight: function (element, errorClass) {
//黄褪显示错误字段,需要jQuery.Highlight插件
$(element).highlightFade({color:'yellow' ,speed:1000 ,iterator:'exponential' })
}
});
所有的检验规则:
(1) required: true 必输
(2) number: true 只能输入数字(包括小数)
(3) digits:true 只能输入整数
(4) minValue: 3 不能小于3
(5) maxValue: 100 最大不超过100
(6) rangeValue:[50,100] 值范围为50-100
(7) minLength: 5 最小长度(汉字算一个字符)
(8) maxLength: 10 最大长度(汉字算一个字符)
(9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)
(10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件
(11) email:true 电子邮件
(12) equalTo: "#field" 与#field值相同
(13) dateISO:true 日期型,格式为1998/01/22 1999-12-12
1.event 是触发校验的方式,可选值有keyup(每次按键时),blur(当控件失去焦点时),不使用这个参数时就只在按提交按钮时触发
2.如果在提交前还需要进行一些自定义处理使用submitHandler 参数,其它的都比较简单,自己看看API 就成了.
3.debug ,如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便.
<input type="submit" name="button" id="button" value="提交" class="sbt"/>
<script src="__PUBLIC__/js/jquery.validate.js" type="text/javascript"></script>
<script language='javascript'>
//表单验证
$(document).ready(function(){
$("#gform").validate({
onfocusout : false, //不响应失去焦点
onkeyup : false,//不响应键盘事件
rules: {
hrr_name : "required",
hrr_zijianjob : "required",
hrr_mile : "required",
hrr_degree : "required",
hrr_phone : "required",
hrr_address : "required",
hrr_email : "required",
hrr_experience : "required"
},
messages: {
hrr_name :"<font color='#FF0000'>用户名不能为空</font>",
hrr_zijianjob :"<font color='#FF0000'>用户名不能为空</font>",
hrr_mile :"<font color='#FF0000'>性别不能为空</font>",
hrr_degree :"<font color='#FF0000'>学历不能为空</font>",
hrr_phone :"<font color='#FF0000'>电话不能为空</font>",
hrr_address :"<font color='#FF0000'>电话不能为空</font>",
hrr_email :"<font color='#FF0000'>电子邮件不能为空</font>",
hrr_experience :"<font color='#FF0000'>个人简介不能为空</font>"
}
});
});
分享到:
相关推荐
以上就是jQuery Validate的基本使用和核心概念,通过熟练掌握这些,你可以轻松实现高效且用户友好的表单验证。记住,始终要关注用户体验,避免过于繁琐的验证过程,同时确保数据安全性和准确性。
jQuery Validate插件极大地简化了前端表单验证的实现,使得开发者能够专注于构建功能丰富的交互式Web应用,而无需担心数据验证的复杂性。通过熟练掌握其核心功能和自定义规则,您可以创建高效且用户体验良好的表单...
在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...
jQuery Validate插件作为一款强大的JavaScript验证工具,广泛应用于各种表单验证场景,包括手机注册表单验证。本文将深入探讨jQuery Validate插件的使用方法,以及如何将其应用于手机注册表单的验证。 一、jQuery ...
2、掌握Jquery-validate表单验证插件的使用,了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,...
以下是对jQuery Validate表单验证插件实现代码的详细解析: 1. **验证准备**: 在开始编写验证逻辑之前,你需要创建一个包含待验证表单元素的HTML结构。这通常包括输入字段、标签和其他必要的表单元素。同时,为了...
Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip Jquery validate表单验证Demo.zip
在这个“jQuery Validate插件验证表单小练”中,我们将深入探讨该插件的基本用法、核心功能以及如何在实际项目中应用。 首先,jQuery Validate 插件的核心在于它的验证规则。这些规则可以设置为必填(required)、...
在本文中,我们将深入探讨jQuery Validate插件,这是一种强大的JavaScript工具,用于实现高效且易于定制的表单验证。...通过下载提供的"jquery validate表单验证插件",您可以开始实践并体验其强大功能。
在IT行业中,jQuery是一个广泛...总之,jQuery的`equalTo`方法是表单验证中的一个强大工具,结合jQuery Validate插件,我们可以轻松实现各种复杂的表单验证逻辑,从而在Web应用中为用户提供更加友好和安全的交互体验。
`jQuery validate` 和 `jQuery form` 插件是 jQuery 生态系统中的两个重要工具,它们分别用于增强表单验证和实现 AJAX 无刷新提交,从而提供更流畅的用户体验。 **jQuery validate 插件** `jQuery validate` 是一...
jQuery validate 是一个非常流行的JavaScript库,用于在客户端进行表单验证。它简化了HTML表单的验证过程,提供了丰富的选项和方法来定制验证规则。在ASP.NET开发中,结合jQuery validate,可以创建用户友好的、交互...
总的来说,jQuery Validate插件为开发者提供了一种简单、灵活的方式来处理表单验证,大大简化了前端验证的复杂度,使得会员信息注册表单的验证变得更加容易。通过合理配置,我们可以确保用户输入的数据符合我们的...
在这个“jquery validate表单验证插件制作注册表单验证提交”的主题中,我们将深入探讨如何使用这个插件来构建一个功能完善的注册表单。 首先,jQuery Validate 插件的核心在于它的简单易用性。在HTML中,你需要为...
《jQuery Validate表单验证插件详解》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,避免无效数据的提交,提高用户体验。jQuery Validate是一个强大的JavaScript库,它使得在...
首先,基本的jQuery Validate表单验证入门涉及对表单的监听和校验。通过绑定`submitHandler`函数,在表单提交时进行自定义操作。例如,可以在函数内部使用`alert`弹窗提示用户表单已经提交,并通过`form.submit()`...
jQuery Validate插件是一个非常流行的JavaScript库,它在客户端实现表单验证方面提供了广泛的功能。通过利用这个插件,开发者可以轻松地在用户的浏览器端对表单数据进行检查,以确保输入的数据符合特定的格式和规则...
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...
首先,`jQuery Validate`的核心功能是验证用户在表单中输入的数据,确保其符合预设的验证规则。例如,我们可以设定密码必须包含字母、数字、特殊字符等要求,以提高安全性。在提供的例子中,它会检查用户输入的密码...
jQuery.validate插件便是为此而生,它提供了丰富的功能来简化前端表单验证的过程。 #### 一、插件简介与引入 jQuery.validate是一个基于jQuery的表单验证框架,它能够帮助开发者快速实现各种复杂的表单验证逻辑。...