Validate使用

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

第一节 validate插件

1.1 validate概述

validate:jQuery的一个插件,依赖jQuery使用, validate是历史最悠久的jQuery插件之一, 经过了全球范围内不同项目的验证, 并得到了许多Web开发者的好评, 作为一个标准的验证方法库
validate拥有如下特点:
1. 内置验证规则: 拥有必填、数字、Email、URL和信用卡号码等19类内置验证规则
2. 自定义验证规则: 可以很方便地自定义验证规则
3. 简单强大的验证信息提示: 默认了验证信息提示, 并提供自定义覆盖默认的提示信息的功能
4. 实时验证: 可能通过keyup或blur事件触发验证,而不仅仅在表单提交的时候验证

1.2 validate使用步骤

使用步骤:
1. 导入jquery文件
2. 导入validate.js
3. 页面加载成功后!对表单进行验证! $("选择器").validate();
4. 在validate中编写校验规则
$("选择器").validate({
       rules:{},
       messages:{}
});

1.3 校验规则

默认校验规则

(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
(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

1.4 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://my.oschina.net/jacksonmike/blog/3137884/../js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://my.oschina.net/jacksonmike/blog/3137884/../js/jquery.validate.js"></script>
    <script type="text/javascript" src="https://my.oschina.net/jacksonmike/blog/3137884/../js/messages_zh.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#formId").validate({
                rules: {
                    //1.校验元素的name属性  username:"校验器" 使用单一的校验器
                    //2.校验元素的name属性  username:{校验器:"值",校验器:"值"}
                    username: {
                        required: true,
                        rangelength: [6, 16]
                    },
                    password: {
                        required: true,
                        digits: true,
                        rangelength: [6, 16]
                    },
                    repeat: {
                        equalTo: "#password"
                    },
                    minvalue: {
                        min: 10
                    },
                    section: {
                        range: [10, 20]
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    sex: {
                        required: true
                    }
                },
                messages: {
                    // name的属性:提示信息
                    // name的属性:{校验器:"xx","校验器":"xxx"}
                    username: {
                      required: "用户名不能为空",
                      rangelength: "长度为6-16"
                    },
                    password: {
                        required: "密码不能为空",
                        digits: "必须是数字",
                        rangelength: "长度为6-16"
                    },
                    repeat: {
                        equalTo: "两次密码不一致"
                    },
                    minvalue: {
                        min: "最小值是{0}"
                    },
                    section: {
                        range: "最小值是{0}, 最大值是{1}"
                    },
                    email: {
                        required: "邮箱不能为空",
                        email: "邮箱格式不正确"
                    },
                    sex: {
                        required: "性别不能为空"
                    }
                }
            });
        });
    </script>
</head>
<body>
    <form   action="#">
        必填:<input type="text" name="username"/> <br/>
        必填数字:<input type="text" name="password"  /> <br/>
        必填重复:<input type="text" name="repeat"/> <br/>
        最小值:<input type="text" name="minvalue"/> <br/>
        区间:<input type="text" name="section"/> <br/>
        邮箱: <input type="text" name="email"><br>
        性别: <input type="radio" name="sex" value="M">男
             <input type="radio" name="sex" value="W">女<br>
        <input type="submit" value="提交"/><br>
    </form>
</body>
</html>
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看