使用jQuery Validation插件来验证表单

jQuery Validation是一个用于验证表单的jQuery插件,简单易用,已经包含了16种内置的验证规则.Github上也有更多的验证规则可以使用.这都不是重点,重点是你可以轻松的定制自己的规则.

内置规则:

  • required – Makes the element required.
  • remote – Requests a resource to check the element for validity.
  • minlength – Makes the element require a given minimum length.
  • maxlength – Makes the element require a given maximum length.
  • rangelength – Makes the element require a given value range.
  • min – Makes the element require a given minimum.
  • max – Makes the element require a given maximum.
  • range – Makes the element require a given value range.
  • step – Makes the element require a given step.
  • email – Makes the element require a valid email
  • url – Makes the element require a valid url
  • date – Makes the element require a date.
  • dateISO – Makes the element require an ISO date.
  • number – Makes the element require a decimal number.
  • digits – Makes the element require digits only.
  • equalTo – Requires the element to be the same as another one

内置规则的使用

内置规则的使用非常简单:

首先将该插件的js文件包含进html文件:

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/jquery.validate.min.js"></script>

然后用jQuery选择需要验证的表单,执行validate()函数即可:

    <script>
    $("#form_id").validate();
    </script>

jQuery Validation官网上的例子:

    <!DOCTYPE HTML>
    <html>
    <head>
    <script src="jquery.min.js"></script>
    </head>
    <body>
    <form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
    <label for="cname">Name (required, at least 2 characters)</label>
    <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
    <label for="cemail">E-Mail (required)</label>
    <input id="cemail" type="email" name="email" required>
    </p>
    <p>
    <label for="curl">URL (optional)</label>
    <input id="curl" type="url" name="url">
    </p>
    <p>
    <label for="ccomment">Your comment (required)</label>
    <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
    <input class="submit" type="submit" value="Submit">
    </p>
    </fieldset>
    </form>
    <script>
    $("#commentForm").validate();
    </script>
    </body>
    </html>

jQuery Validation会根据表单设置的type和属性自动为他们分配内置的规则,比如email,url,required等.

运行一下看看:

什么都不输入,直接点提交:

输入错误的Email地址,改正后错误提示自动消失:

添加自定义规则

jQuery Validation最吸引人的feature,它可以轻松的加入自定义的规则:

第一步,在js中调用jQuery.validator.addMethod函数来添加规则,例如添加IP格式检查的规则:

$.validator.addMethod( "ipv4", function( value, element ) {return this.optional( element ) || /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i.test( value );}, "Invalid IP v4 address." ); //自定义其他规则只需要替换规则名"ipv4",正则表达式//之间的内容,以及出错后显示的字符串"Invalid IP v4 address."即可.

第二步,把规则应用到指定的表单项,即在执行$("#form_id").validate()函数的时候加入rules参数:

    23 $("#ip_form").validate({
    24     rules: {
    25         ip: {
    26             required: true,
    27             ipv4: true,
    28         },
    29         netmask: {
    30             required: true,
    31             ipv4: true,
    32         },
    33         gateway: {
    34             required: true,
    35             ipv4: true,
    36         },
    37     },
    38 }); //其中ip,netmask,gateway为表单项的name属性.required和ipv4是规则名.

生效后的样子,可以添加如下css来修改错误信息的样式:

    label.error {
        margin-left: 10px;
        padding-left: 5px;
        padding-right: 5px;
        color: #E2303A;
        font-style: italic;
        font: Helvetica Neue, 12px, #E2303A;
        border: 1px solid #F2A9AE;
    }

使用json提交数据

表单验证通过后,提交动作默认是使用form本身的提交动作,即指定form的action和method属性:

    method="get" action=""

可以在validate()函数中添加submitHandler参数来指定点击提交后执行的函数,我们可以在该函数中使用$.json来提交数据:

    23 $("#ip_form").validate({
    24     rules: {
    25         ip: {
    26             required: true,
    27             ipv4: true,
    28         },
    29         netmask: {
    30             required: true,
    31             ipv4: true,
    32         },
    33         gateway: {
    34             required: true,
    35             ipv4: true,
    36         },
    37         dns: {
    38             dns: true,
    39         }
    40     },
    41     submitHandler: function(form) {
    42         ip_ok();
    43         $("#ip-conf").modal('hide');
    44     }
    45 });

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码生

FlatList ListView SectionList 下拉刷新 上拉加载 彻底解决

至于 FlatList SectionList 自带的上拉加载功能,根本就是骗人的。

93530
来自专栏程序员的SOD蜜

新手,Visual Studio 2015 配置Boost库,如何编译和选择,遇到无法打开文件“libboost_thread-vc140-mt-gd-1_63.lib“的解决办法

1,到官网下载最新的boost,www.boost.org 这里我下载的1-63版本. 2,安装,解压后运行bootstrap.bat文件。稍等一小会就OK。 ...

46950
来自专栏向治洪

React Native自动化测试

大凡做软件开发,肯定会涉及到很多的测试,本地测试,Junit测试,用例测试等,今天就来说说RN的测试。 React Native的官方代码仓库里有一些测试代码,...

52750
来自专栏追不上乌龟的兔子

使用MongoDB构建数据库集群

MongoDB是一个领先的非关系型数据库管理系统,也是NoSQL运动的重要成员。MongoDB不是使用关系数据库管理系统(RDBMS)的表和固定模式,而是在文档...

24830
来自专栏Timhbw博客

Aria2-不限速全平台下载利器

2016-06-2815:54:31 2 5,355℃热度 1.工具下载(包含本文中出现的所有工具的最新版本) 2. Aria2简介 3.安装与配置 ...

1.9K60
来自专栏炉边夜话

在Debian中打造属于自己的deb包

问题:如果你要在Debian系统中发布一款软件或者一个包,该如何做呢?如果你的项目中有各种二进制包,该如何维护呢?如果你自己做了一款小小的实用软件,该如何与朋友...

28120
来自专栏Java成神之路

Git_学习_09_Commit message 和 Change log 编写指南

1.Commit message 和 Change log 编写指南 2.【译】怎么写Git Commit Message

17730
来自专栏散尽浮华

Mongodb主从复制/ 副本集/分片集群介绍

前面的文章介绍了Mongodb的安装使用,在 MongoDB 中,有两种数据冗余方式,一种 是 Master-Slave 模式(主从复制),一种是 Replic...

2K110
来自专栏沈唁志

在Ubuntu 14.04上安装Zimbra开源版

Zimbra是一个完整的邮件服务器,它提供配置的Postfix与OpenDKIM,Amavis,ClamAV和Nginx,准备处理一个或多个域的邮件。Linod...

78510
来自专栏云原生架构实践

容器化系列 - 通过Grafana监测InfluxDB数据 on Docker

19050

扫码关注云+社区

领取腾讯云代金券