zoukankan      html  css  js  c++  java
  • 表单验证插件----jquery validation

    1、下载地址:http://jqueryvalidation.org/

    2、使用方法:

    <script type="text/javascript" src="http://www.xftz.cn/templets/yuanyou/js/jquery-1.12.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.validate.min.js"></script>
    jquery表单对象.validate()

    3、validade()方法

    作用:验证选中的表单,传入一个配置对象用于对验证进行各种配置。

    3.1.1、rules

    作用:为各种表单元素添加各种验证规则

    类型:object

    使用方法:rules:{

        name属性值:{

        验证规则1,

        验证规则2,

        ...

        }...

    }

    3.1.2、内置的验证规则:

    1)、required:必须输入的字段

    使用:required:true,如果这个标签只有这一条验证规则,可以简写:name属性值:"required"

    2)、minlength:最小字符长度

    3)、maxlength:最大字符长度

    4)、rangelength:字符长度必须介于某个区间

    使用:rangelength:[2,3]

    5)、min:输入值被允许的最小值(数字)

    6)、max:输入值被允许的最大值(数字)

    7)、range:[5,10],输入值必须介于某个区间

    8)、number:true,必须是合法的数字

    9)、digits:true,必须是整数

    10)、email:true,必须是正确的邮箱

    11)、url:true,必须是正确的网址

    12)、equalTo:jq选择器,输入值必须和给定选择器的值相同

    13)、remote:{

          url:"check_email.php",

          type:"post",

          data:{

            username:"xulinjun"

          }

    }

    使用ajax方法,调用服务器端脚本,验证输入值

    14)、extension:限定特定格式的后缀名,多个用"|"隔开,(需要引入additional-methods.min文件)

    4、提示信息的汉化

    4.1、直接引入汉化包

    <script type="text/javascript" src="js/dist/localization/messages_zh.min.js"></script>

    4.2、messages

    如果需要在validate()方法内修改提示信息,则可以使用本方法,

    自定义的提示信息,key:value的形式,key是要验证的元素,value可以是字符串或函数,举例:

    messages:{
                    username:{
                        required:"必须填写"
                    },
                  username1:{
                        required:"必须填写",
                        equalTo:"俩次输入不一致"
                    }
                }
    //这里rules上面的值,messages里面可以同步使用,{0}代表第一个,{1}代表第二个...举例:

    username:{
      required:"必须填写",
      min:"最小的值必须是{0}"
    }

     

    5、submitHandler

    类型:function(form)

    说明,通过验证后运行的函数,默认添加该函数则不会再提交除非手动提交或者使用return true,

    函数参数:该函数接收一个参数,表示当前表单dom对象

    6、invalidHandler(event,validator)

    说明,当一个无效的表单(即验证不通过的时候)被提交的时候触发这个函数

    函数参数:当前验证的表单validator对象

    7、errorClass(默认值error)

    类型:string

    说明:指定错误提示与验证不通过的控件的css类名

    8、validClass(默认值:valid)

    类型:string

    在验证成功的控件上加上传入的css类名

    9、errorElement(默认值:label)

    类型:string

    说明:用什么标签标记错误

    10、errorPlacement(默认值,在无效的元素之后)

    类型:function(error,element)

    说明:自定义错误信息放到哪里

    11、errorContainer

    选择器字符串

    说明:有错误信息出现时把选择器匹配的元素变为显示,没有时隐藏。

    12、errorLabelContainer

    类型:选择器字符串

    说明:把错误信息统一放在一个容器里面

    13、wrapper

    类型:string

    说明:用什么标签再把上边的errorElement包起来

    14、success

    类型:string or function(label,element){

    }

    说明:每个字段验证通过执行函数

    函数参数:label(信息提示标签的jquery对象),element(当初验证成功的dom元素对象)

    如果跟一个字符串,会作为css类加在提示信息的标签上

    15、highlight(默认值,添加errorClass到验证失败的表单控件)

    类型:function(element,errorClass,vaildClass){

    }

    说明:传入的函数会在每个控件验证不通过时执行,我们可以通过这个配置属性,给不通过的控件添加效果

    函数参数:element(当前未通过验证的dom元素对象),errorClass(错误时给错误提示标签的css类名称),vaildClass(vaildClass属性的当前值)

    16、debug(默认值false)

    类型:布尔值

    设置为true之后则表单不会真正的提交,仅仅是验证

    17、ignore(默认值:hidden)

    类型:selector

    说明:忽略某些元素不验证

     三、validator对象

    validate方法返回一个validator对象,我们称这个对象为validator对象

    常用方法:

    1、validator.form()

    返回:boolean

    验证form返回成功还是失败

    2、validator.element()

    返回:boolean

    验证单个表单验证是成功还是失败

    3、validator.resetForm()

    把前面验证的form恢复到验证前原来的状态

    4、validator.showErrors()

    显示特定的错误信息

    5、validator.numberOfInvalids()

    返回验证不通过的字段数

    静态方法:

    6、$.validator.setDefaults()

    改版默认的设置

    7、$.validator.addClassRules()

    增加组合验证类型,可以在一个css类里面用多种验证规则

    8、$.validator.format()

    用参数代表模板中的{n}

     四、rules()方法

    1、介绍:

    查看,新增,移除一个表单控件的验证规则

    2、使用:

    表单控件.rules()

    3、参数:

    rules()  返回元素的验证规则

    rules("add",rules)  增加验证规则

    rules("remove",rules)  删除验证规则,多个验证规则用空格隔开

    五、valid()方法

    1、介绍

    检查表单是否通过

    2、使用

    表单jquery对象.valid()

    六、jquery validation提供的选择器

    1、增加的选择器

    :blank 选择所有没有值或者值为空白的控件

    :filled 选择所有填写了非空值的表单控件

    :unchecked 与jquery提供的checked作用相反

     最后附上一张效果图:

  • 相关阅读:
    Android--多线程之Handler
    Android--Service之基础
    Android--UI之Fragment
    Android--多线程之图文混排
    python常用模块
    python应用之socket编程
    网络编程socket理论一
    pycharm Launching unittests with arguments
    python字符串格式化
    python数据类型之三
  • 原文地址:https://www.cnblogs.com/xlj-code/p/6029693.html
Copyright © 2011-2022 走看看