`

jQuery validate框架使用说明

 
阅读更多
     官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation

一导入js库
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>



(1)required:true               必输字段
(2)remote:"check.php"          使用ajax方法调用check.php验证输入值
(3)email:true                  必须输入正确格式的电子邮件
(4)url:true                    必须输入正确格式的网址
(5)date:true                   必须输入正确格式的日期 日期校验ie6出错,慎用
(6)dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true                 必须输入合法的数字(负数,小数)
(8)digits:true                 必须输入整数
(9)creditcard:                 必须输入合法的信用卡号
(10)equalTo:"#field"           输入值必须和#field相同
(11)accept:                    输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5                输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10               输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10]         输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10]               输入值必须介于 5 和 10 之间
(16)max:5                      输入值不能大于5
(17)min:10                     输入值不能小于10



三、默认的提示
messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: $.validator.format("Please enter no more than {0} characters."),
    minlength: $.validator.format("Please enter at least {0} characters."),
    rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
    range: $.validator.format("Please enter a value between {0} and {1}."),
    max: $.validator.format("Please enter a value less than or equal to {0}."),
    min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

如需要修改,可在js代码中加入:

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} 的值")
});

推荐做法,将此文件放入messages_cn.js中,在页面中引入
<script src="../js/messages_cn.js" type="text/javascript"></script>

补充说明:
required:true 必须有值
required:"#aa:checked"表达式的值为真,则需要验证
required:function(){}返回为真,表时需要验证
例如:
    password : {
required : function (){
var myuserId='${myusers.userId}';
return myuserId=='';
},
maxlength : 20,
minlength : 8
       },
passwordConfirm : {
required : function (){
var myuserId='${myusers.userId}';
return myuserId=='';
},
equalTo : '#password'
},

还有一些特殊的使用:如groups,及在指定位置显示验证不通过的信息。如下所示:

$('#zc_sh_form').validate({
groups: {
    companyAddress: "cityID areaID address",
    companySort: "industryCode sortID"
},
errorPlacement: function(error, element) {
     if (element.attr("name") == "cityID"
                 || element.attr("name") == "areaID" || element.attr("name") == "address" ){
          error.insertAfter(".optionAddress");
     } else if(element.attr("name") == "industryCode" || element.attr("name") == "sortID"){
    error.insertAfter(".catLevel2Sele");
     }else{
    error.insertAfter(element);
     }
},
submitHandler:function(form){
if(confirm("请点击“确定”按钮提交或“取消”按钮返回修改")) form.submit();
}
});
当然,必要时还可使用这些,有很大的帮助对于实现你的需求

highlight: function(element, errorClass, validClass) { // element出错时触发
}

unhighlight: function(element, errorClass) { // element通过验证时触发
}

errorPlacement: function($label, $element) { // 插入错误信息
}

如下,结合使用
errorPlacement: function(error, element) {
    error.insertAfter(element.siblings("b"));
},
success: function(label) {
var eleID=label.attr("for");
$('#'+eleID).siblings("b").removeClass("error").addClass("correct");
},
highlight: function(element, errorClass, validClass) {
$(element).siblings("b").removeClass("correct").addClass("error");
},
errorClass : "errorMessage",
分享到:
评论

相关推荐

    jQuery validate框架的个性化验证

    1. **jQuery Validate 基本使用** jQuery Validate 插件首先需要引入 jQuery 库以及 validate.js 文件。在 HTML 页面中,通过 `$(document).ready()` 函数来初始化验证器,并调用 `.validate()` 方法应用到目标表单...

    jquery-validate验证框架使用详解及JS文件

    本文的配套文档包括《jquery-validate验证框架使用详解.doc》和《jquery.validate.addMethod.doc》,详细解释了框架的使用和自定义方法的创建。同时,提供的`validate.js`和`jquery.validate.zip`文件包含了完整的...

    jquery-validate验证框架使用详解

    在jQuery Validate框架中,主要包含以下几个核心知识点: 1. **安装与引入**:首先,你需要在项目中引入jQuery库和jQuery Validate插件的JavaScript文件。通常,这两个文件可以从CDN(内容分发网络)获取,或者下载...

    jquery validate 使用详解

    jQuery Validate 是一款强大的表单验证插件,基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能,大大提高了用户体验并减少了服务器端的压力。通过简单地配置选项,即可启用各种内置验证规则。...

    jquery validate依赖包及其帮助文档.rar

    jQuery Validate是一个强大的JavaScript库,专为jQuery框架设计,用于简化和优化HTML表单的验证过程。本篇文章将深入探讨jQuery Validate的依赖、核心功能、使用方法以及相关文档资源。 首先,jQuery Validate依赖...

    Struts2+jquery.validate框架实现用户名是否存在

    ### Struts2与jQuery.validate框架简介 #### Struts2框架 Struts2是Apache软件基金会的一个开源项目,它是Struts1的升级版,提供了一个用于构建企业级Java Web应用的强大MVC框架。Struts2的核心组件包括拦截器、...

    jquery validate 验证自定义样式

    总之,jQuery Validate插件提供了一个强大且灵活的框架,用于创建自定义验证样式。通过理解其内部机制并结合CSS和JavaScript,你可以为你的Web应用构建出符合品牌风格和用户体验的验证功能。在实践中不断探索和优化...

    jquery-validate前台验证框架,带详细使用方法

    通过上述方法,你可以灵活地使用jQuery Validate框架实现丰富的前端验证功能。无论是简单的表单还是复杂的业务场景,都能找到合适的解决方案。在实际开发中,记得根据项目需求合理选择和组合这些特性,以提供最佳的...

    Jquery validate框架学习

    NULL 博文链接:https://269629151.iteye.com/blog/1699635

    JQueryValidate验证说明

    首先,使用`jQuery Validate`需要引入相关的文件,包括`jquery.validate.js`作为核心验证框架,`additional-methods.js`包含了一些额外的验证方法,`messages_cn.js`用于本地化消息,以及`jquery.validate.css`定义...

    Jquery validate验证框架案例

    非常好的Jquery validate:每个案例独立,都有注释 讲解了: 环境搭建 常见验证方法配置 国际化错误消息 自定义方法和远程验证 给验证添加 图标效果

    jQuery validate 自定义样式、规则

    jQuery Validate 默认提供了一套简单的样式,但往往需要与现有的前端框架(如Bootstrap、Foundation等)或自定义CSS样式相融合。以下是一些关键步骤: 1. **覆盖默认样式**:jQuery Validate 使用`error`、`valid`...

    jquery validate的漂亮css样式验证

    8. **验证插件的使用**:在实际项目中,你可能需要结合其他插件,如`bootstrapValidator`,来更好地集成Bootstrap框架的样式。 9. **验证触发事件**:了解何时触发验证是关键。你可以选择在用户失去焦点时验证,...

    jquery validate配合struts2简单整改

    《jQuery Validate与Struts2整合应用详解》 在Web开发中,前端验证用户输入的数据是必不可少的一环,jQuery Validate插件就是一款强大的JavaScript验证工具,它可以帮助我们方便地实现表单验证。与此同时,Struts2...

    jquery.validate.js jquery.metadata.js

    通过这种方式,jQuery Metadata和jQuery Validate的结合使用,使得表单验证更加灵活且易于维护。开发者可以在不接触JavaScript的情况下,通过修改HTML就能调整验证规则,这对非程序员或者前端设计人员来说非常友好。...

    jQuery验证框架内置验证方法validate

    ### jQuery验证框架内置验证方法validate #### 一、概述 jQuery验证框架,即`jquery.validate.js`,是一款非常实用的JavaScript库,它为Web开发者提供了简单而强大的客户端表单验证功能。通过使用此插件,可以轻松...

    jquery validate验证示例

    它与 jQuery 框架紧密集成,提供了丰富的验证功能,可以方便地添加到任何使用 jQuery 的项目中。在这个“jquery validate验证示例”压缩包中,很可能包含了 `jQuery Validate` 插件的核心文件以及一些示例代码,帮助...

    Jquery Validate跟bootstrap插件的兼容

    总结起来,jQuery Validate和Bootstrap的结合使用需要对两个插件的工作原理有深入了解,同时注意样式、元素插入、图标显示、事件处理等方面的协调。通过正确的配置和定制,可以创建出既美观又功能完善的Web表单。

    jquery.validate 与 struts2的整合使用

    在Web开发中,jQuery Validate和Struts2是两个非常重要的工具。jQuery Validate是一个轻量级的JavaScript库,用于对HTML表单进行验证,确保用户输入的数据符合预设的规则。而Struts2是一个基于MVC设计模式的Java Web...

Global site tag (gtag.js) - Google Analytics