`

jQuery validate 表单验证 ---jQuery的插件

阅读更多

$("#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的基本使用和核心概念,通过熟练掌握这些,你可以轻松实现高效且用户友好的表单验证。记住,始终要关注用户体验,避免过于繁琐的验证过程,同时确保数据安全性和准确性。

    jQuery Validate表单验证插件

    jQuery Validate插件极大地简化了前端表单验证的实现,使得开发者能够专注于构建功能丰富的交互式Web应用,而无需担心数据验证的复杂性。通过熟练掌握其核心功能和自定义规则,您可以创建高效且用户体验良好的表单...

    jquery validate表单验证插件制作注册表单提交验证

    在本文中,我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单,进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库,它为HTML表单提供了灵活且易于使用的验证规则,确保用户输入...

    jquery validate表单验证插件手机注册表单验证代码

    jQuery Validate插件作为一款强大的JavaScript验证工具,广泛应用于各种表单验证场景,包括手机注册表单验证。本文将深入探讨jQuery Validate插件的使用方法,以及如何将其应用于手机注册表单的验证。 一、jQuery ...

    Java Web Jquery表单验证

    2、掌握Jquery-validate表单验证插件的使用,了解表单验证的实现原理 实现一个基于Jquery的表单验证插件。 1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,...

    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表单验证Demo.zip

    jQuery Validate插件验证表单小练

    在这个“jQuery Validate插件验证表单小练”中,我们将深入探讨该插件的基本用法、核心功能以及如何在实际项目中应用。 首先,jQuery Validate 插件的核心在于它的验证规则。这些规则可以设置为必填(required)、...

    Jquery validate表单验证Demo下载

    在本文中,我们将深入探讨jQuery Validate插件,这是一种强大的JavaScript工具,用于实现高效且易于定制的表单验证。...通过下载提供的"jquery validate表单验证插件",您可以开始实践并体验其强大功能。

    jQuery实现表单验证------equalTo方法

    在IT行业中,jQuery是一个广泛...总之,jQuery的`equalTo`方法是表单验证中的一个强大工具,结合jQuery Validate插件,我们可以轻松实现各种复杂的表单验证逻辑,从而在Web应用中为用户提供更加友好和安全的交互体验。

    Jquery validate和form插件

    `jQuery validate` 和 `jQuery form` 插件是 jQuery 生态系统中的两个重要工具,它们分别用于增强表单验证和实现 AJAX 无刷新提交,从而提供更流畅的用户体验。 **jQuery validate 插件** `jQuery validate` 是一...

    jQuery validate 表单验证源码

    jQuery validate 是一个非常流行的JavaScript库,用于在客户端进行表单验证。它简化了HTML表单的验证过程,提供了丰富的选项和方法来定制验证规则。在ASP.NET开发中,结合jQuery validate,可以创建用户友好的、交互...

    jquery validate表单验证插件制作会员信息注册表单验

    总的来说,jQuery Validate插件为开发者提供了一种简单、灵活的方式来处理表单验证,大大简化了前端验证的复杂度,使得会员信息注册表单的验证变得更加容易。通过合理配置,我们可以确保用户输入的数据符合我们的...

    jquery validate表单验证插件制作注册表单验证提交

    在这个“jquery validate表单验证插件制作注册表单验证提交”的主题中,我们将深入探讨如何使用这个插件来构建一个功能完善的注册表单。 首先,jQuery Validate 插件的核心在于它的简单易用性。在HTML中,你需要为...

    jquery validate表单验证js

    《jQuery Validate表单验证插件详解》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,避免无效数据的提交,提高用户体验。jQuery Validate是一个强大的JavaScript库,它使得在...

    jQuery Validate表单验证深入学习

    首先,基本的jQuery Validate表单验证入门涉及对表单的监听和校验。通过绑定`submitHandler`函数,在表单提交时进行自定义操作。例如,可以在函数内部使用`alert`弹窗提示用户表单已经提交,并通过`form.submit()`...

    jQuery Validate插件实现表单验证

    jQuery Validate插件是一个非常流行的JavaScript库,它在客户端实现表单验证方面提供了广泛的功能。通过利用这个插件,开发者可以轻松地在用户的浏览器端对表单数据进行检查,以确保输入的数据符合特定的格式和规则...

    jquery-validate-1.4.0

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    首先,`jQuery Validate`的核心功能是验证用户在表单中输入的数据,确保其符合预设的验证规则。例如,我们可以设定密码必须包含字母、数字、特殊字符等要求,以提高安全性。在提供的例子中,它会检查用户输入的密码...

    jquery.validate表单验证框架详解

    jQuery.validate插件便是为此而生,它提供了丰富的功能来简化前端表单验证的过程。 #### 一、插件简介与引入 jQuery.validate是一个基于jQuery的表单验证框架,它能够帮助开发者快速实现各种复杂的表单验证逻辑。...

Global site tag (gtag.js) - Google Analytics