jquery validation插件的使用

最新推荐文章于 2024-04-23 16:26:38 发布

那拉ww

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量264

点赞数 1

分类专栏： web 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_52198895/article/details/131904845

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

validation插件的介绍

在进行页面注册等表单验证功能时，传统的判断方式往往需要许多重复，复杂的代码。而使用validation插件可以极大的简化这些步骤。

validation特点：
 内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则
 自定义验证规则：可以很方便的自定义验证规则
 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能
 实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。

validation插件的使用

1.下载插件

链接: [link] (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)

2.导入jquery库和validation插件

<head>
    <meta charset="UTF-8">
    <title>网站注册页面</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
</head>

3.编写验证代码

表单验证格式

$("form表单的选择器").validate(json数据格式);
//json数据格式
{
	rules:{
		 表单项name值:校验规则，
         表单项name值:校验规则... ..
	},
	messages:{
		表单项name值:错误提示信息，
        表单项name值:错误提示信息... ...
	}
}

常用校验规则

required:true 必输字段
email:true 必须输入正确的邮箱格式
url:true 必须输入正确的网址
date:true 必须输入正确的日期
dateISO:true 必须输入正确的日期格式（只验证格式，不验证有效性）
number:true 必须输入合法的数字（负数，小数）
digits:true 必须输入整数
creaditcard: 必须输入合法的信用卡号
equalTo:“#field” 输入值必须和#field相同（一般用于密码与确认密码判断）
accept: 输入拥有合法后缀名的字符串
maxlength:10 输入长度最多是10的字符串（汉字算一个字符）
minlength:5 输入长度最少是5的字符串（汉字算一个字符）
rangelength:[5,10] 输入长度介于5到10之间的字符串（汉字算一个字符）
range:[5,10] 输入值介于5到10之间
max:10 输入值不能大于10
min:5 输入值不能小于10
remote:“check.php” 使用ajax方法调用check.php输入验证值

自定义校验规则

//value是校验组件的value值，element是校验组件的节点对象，params是校验规则的参数
$.validator.addMethod("校验规则名称",function(value,element,params){})

示例

现有如下注册页面
在这里插入图片描述
我们可以定义相应的规则

$("#registForm").validate({
                rules: {
                    user: {
                        required: true,
                        rangelength: [6, 16],
                        //验证正则表达式 自定义规则
                        checkUsername: true

                    },
                    password: {
                        required: true,
                    },
                    repassword: {
                        required: true,
                        equalTo: password
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    username: {
                        required: true
                    },
                    sex: {
                        required: true
                    }

                },
                messages: {
                    user: {
                        required: "用户名不能为空",
                        rangelength: "长度在6-16个字符",
                        checkUsername: "不能以数字开头，不包含特殊字符"
                    },
                    password: {
                        required: "密码不能为空",
                    },
                    repassword: {
                        required: "确认密码不能为空",
                        equalTo: "输入与密码不同"
                    },
                    email: {
                        required: "邮箱不能为空",
                        email: "邮箱格式不正确"
                    },
                    username: {
                        required: "姓名不能为空"
                    },
                    sex: {
                        required: "性别未选择"
                    }
                }
            });
        });

其中用户名要求不能以数字开头并且不包含特殊字符，默认规则无法实现，因此需要自定义规则。

     //自己添加验证规则
            $.validator.addMethod("checkUsername",
                function(value,element,params){
                    let reg =  /^[a-zA-Z]\w$/;
                    if (reg.test(value)){
                        return true;
                    }
                });

这样，一个简单的表单验证功能就实现了。

那拉ww

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery validation插件的使用

在进行页面注册等表单验证功能时，传统的判断方式往往需要许多重复，复杂的代码。而使用validation插件可以极大的简化这些步骤。validation特点： 内置验证规则：拥有必填、数字、email、url和信用卡号码等19类内置验证规则 自定义验证规则：可以很方便的自定义验证规则 简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能 实时验证：可以通过keyup或bulr事件触发验证，而不仅仅在表单提交的时候验证。
复制链接

扫一扫