• jquery插件-表单验证插件-提示信息中文化与定制提示信息


    接上一篇

    2)messages

    提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可!

    如果需要在validate()方法内提示则可以使用本选项

    类型:Object

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

    使用:message:{

    username:"请输入你的用户名"

    filed2:{

    required:'必须填写这个字段',

    email:'请添加一个正确的邮箱格式'

    }

    }

    //和上面填写rules是一样的

    submitHandler

    类型:Function(form)

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

    函数类型:该函数接受一个参数表示当前DOM对象

    invalidHandler

    类型:Function(event,validator)

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

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

    errorClass(默认值error)

    类型:String

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

    6) validClass(默认值:'valid')

    类型:String

    说明:在验证成功的控件上加上传入的CSS类

    7)errorElement(默认值:lable)

    类型:String

    说明:用什么标签标记错误div或者span或者label

    8)errorPlacement(默认值:在 无效的元素之后),

    9) errorContainer

    类型:选择器字符串

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

    10) errorLableContainer

    类型:选择器字符串

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

    11) wrapper

    类型:String

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

    11) success

    类型:String or function(label,element)

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

    函数参数:

      label:信息提示标签的Jquery对象。

      element:当前验证成功的DOM元素对象

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

      重点用于修改提示信息

    12 highlight(默认值:添加errorClass到验证失败的表单控件)

    类型:function(element,errorClass,validClass)

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

    函数参数:

        element:当前未通过验证的Dom元素对象

        errorClass: 错误时给错误提示标签的css类名称

        validClass: validClass属性的当前值

    14)unhighlight(默认值:移除验证失败控件的errorClass)(参数同上)

    重点:验证通过的表单

    15) debug(默认值false)

    类型:boolean

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

    使用方法以及参数同上,作用相反

    16)ignore(默认值:'hidden')

    类型:Selector

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

    15)16)在测试时用

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
    <script type="text/javascript" src="../js/validation/jquery.validate.js"></script>
    <script type="text/javascript" src="../js/validation/messages_zh.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#form1").validate({
                rules: {
                    field1:{
                        required:true,
                        rangelength:[4,6]
                    }
                },
                messages:{
                    
                    field1:{
                        required:'field1不能为空',
                        rangelength:'field1的长度必须子{0}与{1}之间'
                        /*{0}取的是上述属性的第一个值,{1}取的是上述属性的第二个值  */
                    }
                    
                },
                submitHandler:function(form){
                    console.log('success');
                },
                invalidHandler:function(event,validator)
                {
                    console.log("faile");
                },
                errorClass:'sunshengli',
                validClass:'sifangku',
                errorElement:'label',
                errorPlacement:function($error,element)
                {
                $error.insertBefore(element);    
                },
                errorContainer:'#info',
                errorLabelContainer:'#error',
                wrapper:'li',
                success:function($label,element)
                {
                    console.log($label);
                    console.log(element);
                    
                },
                highlight:function(element,errorClass,validClass){
                    $(element).css('background','red');
                },
                unhighlight:function(element,errorClass,validClass){
                     $(element).css('background','#fff');
                }
            });
        });
    </script>
    <style type="text/css">
    form {
        margin: 10px 100px 10px 100px;
    }
    </style>
    </head>
    <body>
        <div id="info" style="height: 30px;background: green;display: none">
            出现错误了
        </div>
        <form id="form1">
            
            <div>
                field1:<input type="text" name="field1" />
            </div>
            
            <div>
                 <input type="submit" name="submit" value="submit"/>
            </div>
        </form>
        <ol id="error"></ol>
    </body>
    </html>
  • 相关阅读:
    PAT——1007. 素数对猜想
    PAT——1006. 换个格式输出整数
    PAT——1005. 继续(3n+1)猜想 (25)
    PAT——1003. 我要通过!
    PAT——1002. 写出这个数
    PAT——1001. 害死人不偿命的(3n+1)猜想
    PAT——年会抽奖(错位 排序 )
    PAT——年会抽奖(错位 排序)
    PAT——不吉利的日期(java中date和Calendar使用)
    MapReduce的输入格式
  • 原文地址:https://www.cnblogs.com/rocky-AGE-24/p/5270833.html
Copyright © 2020-2023  润新知