jQuery之validate验证表单

简介: 访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 validate.

访问jQuery validate官网下载最新插件
https://jqueryvalidation.org/

validate是用来验证表单的
以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便
validate.js是建立在jquery之上的,所以得先导入jquery的类库

我是下载到本地了的jQuery和validate
然后直接引用

<script type="text/javascript" src="../../js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js"></script>

validate主要有三步操作
1. 表单.validate()表示调用该插件
2. rules:定义规则 操作对象是表单内元素
3. messages:当违反规则的时候提示错误 操作对象是表单内元素
完整的:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
        <!--validate.js是建立在jquery之上的,所以得先导入jquery的类库-->
        <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>

        <script>
            $(function(){
                $("#checkForm").validate({
                    rules:{
                        username:{
                            required:true,
                            minlength:6
                        },
                        password:{
                            required:true,
                            digits:true,
                            minlength:6
                        }
                    },
                    messages:{
                        username:{
                            required:"用户名不能为空!",
                            minlength:"用户名不得少于6位!"
                        },
                        password:{
                            required:"密码不能为空!",
                            digits:"密码必须是整数!",
                            minlength:"密码不得少于6位!"
                        }
                    }
                });
            });
        </script>

    </head>
    <body>
        <form action="#" id="checkForm">
            用户名:<input type="text" name="username" /><br />
            密码:<input type="password" name="password"/><br />
            <input type="submit"/>
        </form>
    </body>
</html>

效果图:
这里写图片描述

规则其实更多 : 可以参考

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-231998/01/22。只验证格式,不验证有效性。
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]  输入长度必须介于 510 之间的字符串(汉字算一个字符)。
15  range:[5,10]    输入值必须介于 510 之间。
16  max:5   输入值不能大于 517  min:10  输入值不能小于 10
目录
相关文章
|
7月前
|
JavaScript 前端开发 安全
使用jQuery Validate进行表单验证
使用jQuery Validate进行表单验证
|
4月前
|
JavaScript 数据安全/隐私保护
jQuery Password Validation(密码验证)
jQuery Password Validation(密码验证)
54 3
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery Validate
jQuery Validate
80 4
|
4月前
|
移动开发 JSON 数据可视化
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
精选八款包括可视化CMS,jquery可视化表单,vue可视化拖拉,react可视化源码
82 0
|
6月前
|
前端开发 JavaScript Java
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
关于如何在SpringBoot项目中结合JQuery和Ajax实现表单数据的传输以及单文件或多文件上传的教程。文章提供了完整的前后端示例代码,包括项目的`pom.xml`依赖配置、SpringBoot的启动类`App.java`、静态资源配置`ResourceConfig.java`、配置文件`application.yml`、前端HTML页面(单文件上传和多文件上传加表单内容)以及后端控制器`UserController.java`。文章最后展示了运行结果的截图。
377 0
SpringBoot+JQuery+Ajax实现表单数据传输和单文件或多文件的上传
|
6月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
56 0
|
8月前
|
JavaScript 前端开发 开发者
使用jQuery Validate进行表单验证详解
使用jQuery Validate进行表单验证详解
|
7月前
|
JavaScript 前端开发 CDN
使用jQuery Validate进行表单验证详解
使用jQuery Validate进行表单验证详解
|
8月前
|
JavaScript
jQuery如何验证复选框是否选中
jQuery如何验证复选框是否选中
37 0
|
9月前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
55 4
jQuery会员中心安全修改表单特效