jquery插件-表单验证插件

易博文
2023-12-01

JQuery 插件概述:

插件(plugin)也被成为扩展,是一种遵循一定规范的应用程序编写出来的程序,JQuery有大量

现成的插件。

一句话,JQuery插件就是别人依照Jquery官方规范写好的各种功能,我们可以拿过来直接用,而不需要再去写。

jquery-validation-1.15.0

下载链接http://jqueryvalidation.org/

这个插件有三个主要方法

1、validate()

  用于验证表单,也是该插件最核心的方法

2、valid()

  验证表单是否通过

3、rules()

  为一个表单控件、查看、新增、移除规则

增加了一些选择器

:blank

  选择所有没有值或者值为空白的表单控件

:filled

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

:unchecked

  与JQuery提供的:checked选择器相反

配置选项

1)rules:为各种表单添加验证规则

   $("form1").validate({

    rules{

      控件1:{

          验证规则1,验证规则2,验证规则3,验证规则4

        },

      控件2:{

          验证规则1,验证规则2,验证规则3,验证规则4

          ......

        },

        ......

       }

    });

 

在validation的包里面找到了了一个本地化的文件里面应该是所有的规则了

$.extend( $.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请输入有效的电子邮件地址",
    url: "请输入有效的网址",
    date: "请输入有效的日期",
    dateISO: "请输入有效的日期 (YYYY-MM-DD)",
    number: "请输入有效的数字",
    digits: "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo: "你的输入不相同",
    extension: "请输入有效的后缀",
    maxlength: $.validator.format( "最多可以输入 {0} 个字符" ),
    minlength: $.validator.format( "最少要输入 {0} 个字符" ),
    rangelength: $.validator.format( "请输入长度在 {0} 到 {1} 之间的字符串" ),
    range: $.validator.format( "请输入范围在 {0} 到 {1} 之间的数值" ),
    max: $.validator.format( "请输入不大于 {0} 的数值" ),
    min: $.validator.format( "请输入不小于 {0} 的数值" )
} );

使用:

1) required:

name属性值:'required'

2) minlength

说明:最小字符长度

使用: minlength:数字

3) maxlength

说明:最大字符长度

使用:maxlength:数字

4) rangelength

说明:字符长度必须介于某个区间

使用:rangelength:[5,10]

5) min

说明:输入的最小值

使用:min:5

6) max

说明:输入的最大值

使用max:10

7) range

说明:输入的值必须介于某个区间

使用:range:[5,10]

8) number

说明:必须是合法数字

使用:number:true

9)digits:

说明:必须是整数

使用:digits:true

10) email

说明:必须是email正确格式的电子邮件

使用:email:true

11) url

说明:必须输入正确格式的网址

使用:url:true

12) equalTo

说明:输入值必须和给定选择器的字段的值相同

使用:equalTo:'选择器'

13)remote

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

使用:remote:'服务器端脚本'

例如:remote: check.php默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项

remote:{

    url:'checkPassword.do',

    type:'post',

    data:{

        username:'qwerty',

        password:'123456'

     }

}

参数与值和$.ajax方法相同

还有一些验证规则需要引入additional-methods.min.js,这里面添加了很多验证规则,

14) extension

说明:验证上传的文件的后缀名

使用:extension:合法的后缀名(不带点),多个的后缀明之间用竖线隔开

例如:extension:'cpp|java'

<!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">
    $(document).ready(function()
    {
        $("#form1").validate({
            rules: {
                field1:{
                    required:true
                    /*如果只有一个验证规则则可以
                    field:'required',就不需要用对象了*/
                },
                field2:{
                    required:true
                },
                field3:{
                    required:true,
                    //要验证minlength则必须加上required规则
                    //否则它就不验证
                    minlength:2,
                    maxlength:6
                },
                field4:{
                    required:true,
                    rangelength:[4,6]
                },
                field5:{
                    required:true,
                    min:5,
                    max:10
                },
                field6:{
                    required:true,
                    range:[5,10]
                },
                field7:{
                    required:true,
                    number:true
                },
                field8:{
                    required:true,
                    digits:true
                },
                field9:{
                    required:true,
                    email:true
                },
                field10:{
                    required:true,
                    url:true
                },
                field11:{
                   equalTo:'input[name="field6"]'
                    
                }
            }
        });
    });
</script>
<style type="text/css">
form {
    margin: 10px 100px 10px 100px;
}
</style>
</head>
<body>
    <form id="form1">
        <div>
            field1:<input type="text" name="field1" />
        </div>
        <div>
            field2:<input type="text" name="field2" />
        </div>
        <div>
            field3:<input type="text" name="field3" />
        </div>
        <div>
            field4:<input type="text" name="field4" />
        </div>
        <div>
            field5:<input type="text" name="field5" />
        </div>
        <div>
            field6:<input type="text" name="field6" />
        </div>
        <div>
            field7:<input type="text" name="field7" />
        </div>
        <div>
            field8:<input type="text" name="field8" />
        </div>
        <div>
            field9:<input type="text" name="field9" />
        </div>
        <div>
            field10:<input type="text" name="field10" />
        </div>
        <div>
            field11:<input type="text" name="field11" />
        </div>
        <div>
            field16:<input type="text" name="field16" required="true" min="5"/>
            <!--如果属性比较少可以直接写在html标签里面  -->
        </div>
        <div>
             <input type="submit" name="submit" value="submit"/>
        </div>
    </form>
</body>
</html>

 

转载于:https://www.cnblogs.com/rocky-AGE-24/p/5269515.html

 类似资料: