`

jquery表单校验

阅读更多
$(document).ready(function(){
         $("#demoForm").validate({

             rules:{
               username:{   //name 指的是name值不是ID
                  required:true,
                  minlength:2,
                  maxlength:10,
                  rangelength:[2,10]  //长度范围,这样就不用最大、最小了

               },
              password:{ 
                  required:true
              }
             },
             message:{
                username:{
                   required:"必填项",
                   rangelength:"用户名在2-10之内"
                },
                password:{
                   required:"必填项"
                }

             }
         });
});

基本API:
method:校验的方法
rule   : 规则
在validate 方法中 加上 debug:true   //在校验成功后,是不会进行提交操作的
基本的验证方法:
  remote :远程校验
  在rule规则中使用
  min  :表示的值  (最小数、最大数、数字范围)  minlength :长度
email:邮箱格式  URL :URL格式
  $("#demoFrom").validate({
     rules:{
         username:{
            remote:{
                url:"",
                method:"POST",
                date:{
                     loginTime:function(){
                                  return +new date(); //另外多加一个参数
                               }
                }
            }
         }
     },
     message:{
          username:{
               remote:"用户名错误"  //remote 信息提示 
          }
          
     }
  });


[b]
validate : 进阶功能
[/b]
valid()
 检查表单是否正确     $("#demoFrom").valid()
rule()  方法,  获取的是节点的规则

[b]
validate 静态方法
[/b]
validate配置项
submitHandler:function(form){   //通过验证后运行的
    
},
invalidHandler:function(event,validator){  //验证不通过后触发的方法,无效表单提交后运行的函数

                             
}[b][/b]
//追加错误信息的位置
$("#demoFrom").validate({

   groups:{
      login:"username password";  
   },
   errorPlacement:function(error,element){
       error.insertBefore("#info");   //info 要追加的位置的节点
   }
});
配置项  : onsubmit  :是否在提交时进行验证,默认是true
           onfocusout:是否在获取焦点的时候进行验证
           onkeyup   : 是否在敲击键盘的时候进行验证
           onclick : 是否在鼠标点击的时候进行验证   一般用于checkbox或者radio
           errorClass  : 错误提示的css样式,可以自定义
           validClass:  指定验证通过的css样式
           errorElement   使用什么标签标记错误
           wrapper :使用什么标签把上面的标签包装起来
           errorLabelContainer:把错误信息统一放在一个容器里面
           errorContainer:显示或者隐藏验证信息可以自动实现有错误时,出现把容器标记为显示,没错误时标记为隐藏
validate 自带的选择器
:blank    选择值为空 的元素  即取消空格后的值的长度是否等于零
:filled   选择所有值不为空的元素   与上面正好相反
:unchecked   所有的没有被选中的元素


validate自定义的验证方法
 jQuery.validator.addMethod(name,method,[,message])
name: 方法名
method 方法体  function(value, element,params){}
message :提示信息 可选

分享到:
评论

相关推荐

    jQuery表单校验插件validate实例代码集

    jQuery表单校验插件validate实例代码集 有多个表同的表单,来共同展现表单验证插件的各种用法,包括判断字符、输入为空、类型判断、适时Ajax方式提示等,通过这些实例可快速掌握验证的方法和要点,此前,源码爱好者...

    jquery 表单校验的插件formValidator4.01

    **jQuery FormValidator 4.0.1:打造高效且实用的表单验证** 在Web开发中,表单验证是不可或缺的一环,它确保用户输入的数据符合预期格式,从而避免无效数据提交,提升用户体验。jQuery FormValidator是一款强大的...

    jQuery表单校验插件validator使用方法详解

    以下是对jQuery表单校验插件Validator的详细说明: **1. 引入所需文件** 在使用Validator之前,需要引入jQuery库以及Validator插件的JavaScript文件。通常,jQuery库可以从CDN获取,而Validator插件可以在其官网...

    jQuery表单验证插件

    **jQuery表单验证插件详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而提高用户体验并减少服务器端的负担。jQuery,一个轻量级、高性能的JavaScript库,提供了丰富的API...

    Web通用的表单校验JS

    在Web开发中,表单是收集用户数据的重要途径,而表单校验则是确保这些数据质量和安全的关键步骤。本文将详细介绍一种通用的JavaScript(JS)表单校验方法,通过导入特定的JS文件,可以轻松实现对用户输入的验证。 ...

    jQuery表单校验插件validate实例代码集展现了插件的各种用法.zip

    在Web开发中,表单验证是必不可少的部分,而jQuery的validate插件就是专门用于表单验证的一个插件,它提供了丰富的选项和方法,使得开发者能够方便地实现自定义的表单验证规则。 validate插件的安装通常是通过引入...

    jquery的validate表单校验插件

    《jQuery的validate表单校验插件深度解析》 在前端开发中,表单校验是必不可少的一个环节,它能够确保用户输入的数据符合预设的规范,提高用户体验并减轻服务器端的压力。jQuery的validate插件作为一款强大的表单...

    jQuery的表单校验插件validate

    jQuery的表单校验插件`validate`是前端开发中常用的一个工具,它极大地简化了对HTML表单数据的验证过程。这个插件基于流行的JavaScript库jQuery构建,为开发者提供了丰富的选项和方法来定制表单验证规则,确保用户...

    jQuery Validate 表单校验插件.zip

    jQuery Validate 插件依赖 jQuery 库,使用前需要先导入 jQuery的 js 文件,再导入 jquery.validate.js 插件,可以再导入中文提示信息文件 messages_zh.js

    Jquery-validate表单js源文件与使用文档,让你轻松运用jquery进行表单校验各种表单

    《jQuery-validate:轻松掌握表单验证的神器》 在网页开发中,表单验证是必不可少的一环,它能确保用户输入的数据符合预期,提高用户体验,防止无效数据提交到服务器。jQuery-validate是一个强大的JavaScript库,专...

    jquery加强和表单校验插件的使用

    jquery的基础使用和表单校验插件的使用。

    jquery表单验证实例,对数字,字数,必填项等校验

    在"jquery表单验证实例,对数字,字数,必填项等校验"这个项目中,我们关注的核心知识点包括: 1. **jQuery Validate插件安装与引入**:首先,你需要在HTML文件中引入`jQuery`库和`jQuery Validate`插件的JS文件。...

    jQuery 表单验证扩展(三)

    根据提供的文件信息,下面我将详细介绍关于jQuery表单验证中输入文本内容范围验证的相关知识点。 首先,我们需要了解什么是jQuery表单验证。jQuery表单验证是指使用jQuery这个流行的JavaScript库来增强HTML表单的...

    jquery 校验大全 实例

    "jQuery校验大全实例"是针对使用jQuery进行表单验证的一个综合资源,非常适合开发者学习和应用。这个压缩包可能包含了各种jQuery验证插件、代码示例以及详细的教程,旨在帮助开发者实现高效且用户友好的表单验证。 ...

    jQuery的校验控件的改修

    首先,jQuery的校验控件通常指的是`jQuery Validation Plugin`,这是一个非常流行的开源插件,它提供了一套完整的表单验证解决方案。通过这个插件,开发者可以轻松添加各种验证规则,如非空、邮箱格式、手机号码格式...

    jQuery 表单验证插件

    对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制,别的表单校验控件是代码里写死的,而...

Global site tag (gtag.js) - Google Analytics