jQuery插件——Validation的使用

最新推荐文章于 2022-11-09 09:59:22 发布

AyiAyioo

最新推荐文章于 2022-11-09 09:59:22 发布

阅读量654

点赞数

分类专栏： jQuery 文章标签：表单验证 validation

本文链接：https://blog.csdn.net/Ayiayi00/article/details/76181598

版权

插件（plugin）也成为扩展（Extension），是一种遵循一定规范的应用程序接口编写出来的程序。

最新最全的插件可以从Jquery官方网站的插件板块中获取，网站网址为http://plugins.jquery.com/

（由于垃圾邮件、不规范的插件、数据备份、版本维护以及对目前插件站点功能的不满足等多种原因，jQuery官方已经讲项目托管与Github，网址为https://github.com/jquery/plugins.jquery.com）

1、Validation

Validation是一个优秀的表单验证插件，Validation拥有一下优点：

1.1、内置验证规则：拥有必读、数字、E-mail、URL和信用卡号码为19类内置验证规则。

1.2、自定义验证规则：可以方便地自定义验证规则。

1.3、简单强大的验证信息提示：默认验证信息提示，也提供了自定义验证信息覆盖默认提示信息的功能。

1.4、实时验证：可以同归keyup或blur时间触发验证，而不是仅仅表单提交的时候验证。

Validation下载地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

简单例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery插件的应用</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/jquery-validate/1.16.0/jquery.validate.js"></script>
    <style type="text/css">
        *{
            font-family: Verdana;
            font-size: 96%;
        }
        lable{
            width: 10em;
            float: left;
            text-align: center;
        }
        lable.error{
            float: none;
            color: red;
            padding-left: 5em;
            vertical-align: top;
        }
        p{
            clear: both;
        }
        .main{
            margin:0 auto;
            /*border: 1px solid darkgray;*/
            height: 250px;
            width: 600px;
        }
        .submit{
            margin-left: 12em;
        }
        em{
            font-weight: bold;
            padding-right: 1em;
            vertical-align: middle;
            color: red;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#commentForm").validate();
        })

    </script>
</head>
<body>
   <div class="main">
       <form action="#" class="cxmform" id="commentForm" method="get">
           <fieldset>
               <legend>一个简单的验证带验证提示的评论例子</legend>
               <p>
                   <lable for="cursername">姓名：</lable><em>*</em>
                   <input type="text" id="cursername" name="username" size = "25" class="required" minlength="2">
               </p>
               <p>
                   <lable for="cemail">电子邮件：</lable><em>*</em>
                   <input type="text" id="cemail" name="email" size = "25" class="required email" >
               </p>
               <p>
                   <

最低0.47元/天解锁文章

AyiAyioo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery插件——Validation的使用

插件（plugin）也成为扩展（Extension），是一种遵循一定规范的应用程序接口编写出来的程序。最新最全的插件可以从Jquery官方网站的插件板块中获取，网站网址为http://plugins.jquery.com/（由于垃圾邮件、不规范的插件、数据备份、版本维护以及对目前插件站点功能的不满足等多种原因，jQuery官方已经讲项目托管与Github，网址为https://github
复制链接

扫一扫

专栏目录