jQuery表单验证插件——Validation

最新推荐文章于 2021-09-05 12:36:00 发布

Cancer_Scorpio

最新推荐文章于 2021-09-05 12:36:00 发布

阅读量554

点赞数

分类专栏：前端文章标签： jquery 插件

本文链接：https://blog.csdn.net/Cancer_Scorpio/article/details/52713352

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery Validation 插件</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<form id="demoForm">
    <fieldset>
        <legend>用户登录</legend>
        <p id="info"></p>
        <p id="info2" style="display:none">输入错误</p>

        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username"/>
        </p>

        <p>
            <label for="password">密码</label>
            <input type="password" id="password" name="password"/>
        </p>

        <p>
            <label for="confirm-password">确认密码</label>
            <input type="password" id="confirm-password" name="confirm-password"/>
        </p>

        <p>
            <button id="check">检查表单</button>
            <input type="submit" value="登录"/>
        </p>
    </fieldset>
</form>

<script src="js/jquery-1.10.0.js"></script>
<script src="js/jquery.validate-1.13.1.js"></script>
<script>
    var validator;//需要在控制台调用
    $(document).ready(function(){

        validator = $("#demoForm").validate({
            debug:true,
            rules:{
                username:{
                    required:true,//必填
                    minlength:2,//最小长度
                    maxlength:10//最大长度
                },
                password:{
                    required:true,
                    minlength:2,
                    maxlength:16
                },
                "confirm-password":{
                    equalTo:"#password"
                }
            },
            messages:{//自定义提示信息
                 username:{
                    required:"必须填写用户名",
                    minlength:"用户名最小为2位",
                    maxlength:"用户名最大为10位"
                },
                password:{
                    required:"必须填写密码",
                    minlength:"密码最小为2位",
                    maxlength:"密码最大为16位"
                },
                "confirm-password":{
                    equalTo:"两次输入的密码不一致"
                }
            },
            /*groups:{
                login:"username password confirm-password"
            },
            errorPlacement:function(error,element){
            error.insertBefore("#info"); 
            },*/

            /*errorContainer:"#info2",
            errorLabelContainer:"#info",//错误信息放在#info里面
            errorElement:"li",//用li标签标记
            wrapper:"ul"//用ul标签将li包裹起来*/

            /*showErrors:function(errorMap,errorList){
                console.log(errorMap);
                console.log(errorList);
                this.defaultShowErrors();//如果不写就没有默认的错误提示信息
            }*/

           /* highlight:function(element,errorClass,validClass){
                $(element).addClass(errorClass).removeClass(validClass);
                $(element).fadeOut().fadeIn();
            },
            unhighlight:function(element,errorClass,validClass){
                $(element).addClass(errorClass).removeClass(validClass);
            },*/

        });

        /*$.validator.addMethod("postcode",function(value,element,params){
                var postcode = /^[0-9]{6}$/;//六位0-9的数字
                return this.optional(element) || (postcode.test(value));//this.optional(element)表示在没有填写值的时候返回true，(postcode.test(value))表示在符合要求时返回true，不写前者表示此项必填
            },$.validator.format("请填写正确的{0}邮编！"));*/

        $("#check").click(function(){
            alert($("#demoForm").valid() ? "输入信息正确！" : "输入信息不正确！");
        });
    });
</script>

</body>
</html>

关于标签的一些问题：

1、fieldset标签

定义和用法

fieldset 元素可将表单内的相关元素分组。

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。

2、legend标签

定义和用法

legend 元素为 fieldset元素定义标题（caption）。

例：

关于插件：

1、首先Validation插件是表单验证插件，所有一定是form表单。

2、如果输入不正确或不输入，input会自动添加error样式，且自动添加label标签。

<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username"/>
</p>

开始：

错误输入：

正确输入：

3、不懂这种写法？input[type=submit]表示设置提交按钮的样式？
input[type=submit], button {
margin-top: 20px;
font-size: 36px;
padding: 10px 0;
}

4、label标签的for属性
for 属性规定 label 与哪个表单元素绑定。
隐式和显式的联系
标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 <label> 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

5、rule规则中定义的username和password对应的是name属性值不是id属性值。

6、validate是插件的核心方法，定义一些基本的校验规则和一些有用的配置项。
例如：debug: true表示表单不会提交，只进行检查。

7、remote远程校验，比如判断用户名是否存在
rules: {
username: {
required: true,//必填
minlength: 2,
maxlength: 10，
remote:"remote.json" //json字符串中返回false，默认get方法提交
}
}
messages:{//自定义提示信息
username:{
required:"必须填写用户名",
minlength:"用户名最小为2位",
maxlength:"用户名最大为10位"，
remote:"用户名不存在"
}
实际后台代码中可以进行对数据库的操作。

也可以设置post请求：
rules: {
username: {
required: true,//必填
minlength: 2,
maxlength: 10，
remote:{
url:"remote.json",//链接
type:"post",//提交方式
data:{//提交数据，默认提交username，也可以提交其他的数据
loginTime:function(){
return +new Date;//相当于Date对象调用getTime（）方法，返回一个long型的毫秒数时间
}
}
}
}
}

问题：XMLHttpRequest cannot load file，不能加载json？
大概是因为必须从localhost打开？

return +new Date;？
+是一个转换符，是转换为字符串，还是转换为数字，要看加号前后的数据类型，如果都是数字，自然结果还是数字，如果一个是数字一个是字符串就会转换为字符串，像这里加号左边没有任何东西，那么加号的作用就是试着将右边的时间类型转换为数字，有getTime()方法，自然能够转换成数字。

8、rangelength，长度范围
minlength: 2,
maxlength: 10
可以写成
rangelength：[2,10]
message中的写法：
rangelength:"用户名应该在2-10位"

对比min、max、range：
min：2，
max：10
是指输入的值在2-10之间，相应range也是这个意思。

9、dateISO 标准日期格式：年-月-日或年/月/日
dateISO:true
2016-10-03

10、其他验证方法：
number：数字（number：true）
digits：整数（digits：true）
equalTo：与其他数值一致

"confirm-password":{
equalTo:"#password"
}
因为中间有连字符，所以用引号引入，equalTo后的值是要比较的选择器的值。

11、valid（）：检查表单或某些元素是否有效
$("#check").click(function(){
alert($("#demoForm").valid() ? "输入信息正确！" : "输入信息不正确！");
});

12、rules（）：获取表单元素的校验规则
rules（“add”，“rules”）：向表单元素增加校验规则
rules（“remove”，rules）：删除表单元素校验规则

$("#username").rules("add",{minlength:2,maxlength:10})
$("#username").rules("remove","minlength maxlength")
注意：rules（）获取的是某个表单元素的校验信息，获取整个表单的校验信息会报错。

13、validator对象
validate方法返回validator对象
validator.form（）：验证表单是否有效，返回true/false
控制台：validator.form() -> false

validator.element(element)：验证某个元素是否有效，返回true或false
控制台：validator.element("#username") -> false

validator.resetForm（）：把表单恢复到验证前的状态
validator.showErrors（errors）：针对某个元素显示特定的错误信息
控制台：validator.showErrors({
username:"你填错了！"，
password:"密码也错了！"
})

validator.numberOfInvals（）：返回无效的元素数量
控制台：validator.numberOfInvals（） -> 2（什么都不填）

14、validator对象一些静态方法，可以直接使用
jQuery.validator.setDefaults(options)：修改插件默认设置
将所有表单设置debug为true：
$.validator.setDefaults({ debug:true });

jQuery.validator.addClassRules(name,rules)：为某些包含名为name的class增加组合验证类型
去除required方法，加上class=“txt”
$.validator.addClassRules({
txt:{
required:true,
minlength:5
}
})

15、validate方法配置项：rules
举例：如果密码没有填写，那么用户名也不需要填写
rules: {
username: {
required:{
depends:function(element){
return $("#password").is(":filled");//密码是否被填写
}
},
minlength: {
param：2，
depends:function(element){
return $("#password").is(":filled");
}//如果$("#password").is(":filled")为true，参数被传入
},
maxlength: 10
}

16、validate方法配置项：ignore，对某些元素不进行校验
默认值：ignore:":hidden" 不对隐藏的元素进行校验
ignore:"#username" 登录时不再进行校验

17、validate配置项：groups，对一组元素的验证，用一个错误提示，用errorPlacement控制把出错信息放在哪里。
在表单中加入一个p标签，
<p id="info"></p>
处理错误信息：
groups:{
login:"username password confirm-password"
},
errorPlacement:function(error,element){
error.insertBefore("#info"); //将错误信息添加到#info前面
}

18、validate配置项：
onsubmit，是否在登录时进行验证。
例：onsubmit：false 不进行验证，默认是true

onfocusout：是否在获取焦点时验证
onkeyup：是否在敲击键盘时验证
onclick：是否在鼠标点击时验证，一般用于checkbox或者radio
focusInvalid：提交表单后，未通过验证的表单（第一个或提交之前获得焦点的未通过验证的表单）是否会获得焦点
focusCleanup：当未通过验证的元素获得焦点时，是否移除错误提示

errorClass：指定错误提示的css类名，可以自定义错误提示的样式
validClass：指定验证通过的css类名
例： errorClass:"wrong",
validClass:"right"

errorElement：使用什么标签标记错误
wrapper：使用什么标签把上边的errorElement包起来
errorLabelContainer：把错误信息统一放在一个容器里面
errorContainer：显示或者隐藏验证信息，可以自动实现有错误信息出现时把容器属性变为显示，无错误时隐藏
例：
errorContainer:"#info2",//有错误信息时显示，没有则不显示
errorLabelContainer:"#info",//错误信息放在#info里面
errorElement:"li",//用li标签标记
wrapper:"ul"//用ul标签将li包裹起来

showErrors：可以显示总共有多少个未通过验证的元素
例：
showErrors:function(errorMap,errorList){
console.log(errorMap);
console.log(errorList);
this.defaultShowErrors();//如果不写就没有默认的错误提示信息
}

errorPlacement：自定义错误信息放到哪里
success：要验证的元素通过验证后的动作
例：success:"right"
或
success:function(label){
label.addClass("rrrrright");
}

highlight：出错时触发
unhighlight：通过验证时触发，一般和highlight同时使用
例：
highlight:function(element,errorClass,validClass){
$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();//未通过时淡入淡出
},
unhighlight:function(element,errorClass,validClass){
$(element).addClass(errorClass).removeClass(validClass);
//通过时移除样式
},

19、选择器扩展
：blank 选择所有值为空的元素
：filled 选择所有值不为空的元素
：unchecked 选择所有没有被选中的元素

20、自定义验证方法
jQuery.validator.addMethod{name,method[,mesage]}
name:方法名称
method:function{value，element，params} 方法逻辑
message:提示消息
例：
$.validator.addMethod("postcode",function(value,element,params){
var postcode = /^[0-9]{6}$/;//六位0-9的数字
return this.optional(element) || (postcode.test(value));
},"请填写正确的邮编！");

rules:{
username:{
required:true,//必填
//minlength:2,//最小长度
//maxlength:10//最大长度
postcode:true
}
注意：this.optional(element)表示在没有填写值的时候返回true，也就是说在没有输入时不进行验证，不写前者表示不输入也进行验证，也就是此项必填，(postcode.test(value))表示在符合要求时返回true。return的值为false则显示提示信息。

additional-methods.js validate插件本身提供了这个js文件，包含了很多扩展验证方法
例：
$.validator.addMethod("postcode",function(value,element,params){
var postcode = /^[0-9]{6}$/;//六位0-9的数字
return this.optional(element) || (postcode.test(value));},$.validator.format("请填写正确的{0}邮编！"));

给rules中的postcode传参：postcode：“中国”
传入的参数显示在{0}的位置