jQuery常用插件

1，jQuery特别容易扩展，开发者可以基于jQuery开发一些扩展动能

2，插件:http://plugins.jquery.com

3，超厉害的插件：validation 、 pickadate、  Echarts、chosen、（编辑器插件） ckeditor在百度上都可以直接搜索

表单校验

jQuery插件validation：https://jqueryvalidation.org/

validation是一个基于jQuery的插件，里面有了jQuery的一些函数和功能

使用validation插件实现表单验证

初始时点击注册的效果：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="js/jquery-3.3.1.js"></script>

     </head>

     <body>

         <form  id="registerForm">

             <table border="1" width="800px" height="500px" >

                 <tr><td colspan="2" align="center" >注册 </td></tr>

                 <tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>

                 <tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>

                 <tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>

                 <tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>

                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>

                 <tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女

                 <label for="sex" class="error"></label>

                 </td></tr>

                 <tr><td colspan="2" align="center"><input type="submit"  value="注册"/> </td></tr>

             </table>

         </form>

     </body>

 </html>

未使用插件时.html

使用了插件并书写了校验规则：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="js/jquery-3.3.1.js"></script>

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

         <script>

             var validateRule={

                 rules:{

                     username:{

                         required:true,//必填

                         minlength:3,

                         maxlength:6

                     },

                     email:{

                         required:true,

                         email:true

                     },

                     password:{

                         required:true,

                         minlength:3,

                         maxlength:6

                     },

                     repassword:{

                         required:true,

                         equalTo:"[name='password']"//与名为password填的内容保持一致

                     },

                     birthday:{

                         date:true//填写的内容需与日期的格式内容保持一致

                     },

                     sex:{

                         required:true

                     }

                 },

             };

             $(function(){

                 $("#registerForm").validate(validateRule);

             })

         </script>

     </head>

     <body>

         <form  id="registerForm">

             <table border="1" width="800px" height="500px" >

                 <tr><td colspan="2" align="center" >注册 </td></tr>

                 <tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>

                 <tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>

                 <tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>

                 <tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>

                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>

                 <tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女

                 </td></tr>

                 <tr><td colspan="2" align="center"><input type="submit"  value="注册"/> </td></tr>

             </table>

         </form>

     </body>

 </html>

没有引入国际化的message.js文件.html

由于默认给出的是英文提示，所以我们也可以引入国际化的message.js文件

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="js/jquery-3.3.1.js"></script>

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

         <script type="text/javascript" src="js/messages_zh.min.js" ></script>

         <script>

             var validateRule={

                 rules:{

                     username:{

                         required:true,//必填

                         minlength:3,

                         maxlength:6

                     },

                     email:{

                         required:true,

                         email:true

                     },

                     password:{

                         required:true,

                         minlength:3,

                         maxlength:6

                     },

                     repassword:{

                         required:true,

                         equalTo:"[name='password']"//与名为password填的内容保持一致

                     },

                     birthday:{

                         date:true//填写的内容需与日期的格式内容保持一致

                     },

                     sex:{

                         required:true

                     }

                 },

             };

             $(function(){

                 $("#registerForm").validate(validateRule);

             })

         </script>

     </head>

     <body>

         <form  id="registerForm">

             <table border="1" width="800px" height="500px" >

                 <tr><td colspan="2" align="center" >注册 </td></tr>

                 <tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>

                 <tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>

                 <tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>

                 <tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>

                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>

                 <tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女

                 </td></tr>

                 <tr><td colspan="2" align="center"><input type="submit"  value="注册"/> </td></tr>

             </table>

         </form>

     </body>

 </html>

引入了国际化的message.js文件.html

我们也可以自己自定义书写提示内容，在messages中进行书写

<script>

            var validateRule={

                rules:{

                    username:{

                        required:true,//必填

                        minlength:3,

                        maxlength:6

                    },

                    email:{

                        required:true,

                        email:true

                    },

                    password:{

                        required:true,

                        minlength:3,

                        maxlength:6

                    },

                    repassword:{

                        required:true,

                        equalTo:"[name='password']"//与名为password填的内容保持一致

                    },

                    birthday:{

                        date:true//填写的内容需与日期的格式内容保持一致

                    },

                    sex:{

                        required:true

                    }

                },

            messages:{

                    username:{

                    required:"这个是必须填写的哦！！",//必填

                    minlength:"最少得3个字符哦！！",

                    maxlength:"最多只能填6个字符哦！！"

                    },

                    sex:{

                        required:"性别必须的勾选哦！！！"

                    }

                }

            };

            $(function(){

                $("#registerForm").validate(validateRule);

            })

        </script>

从展示的效果图中我们可以看到性别的那一栏提示内容并没有意识提示在后面，而是在两个input标签之间，我们可以做这样的处理，就可以将提示内容展示在后面：

<tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女

              <label for="sex" class="error" style="display: none;"></label>

                </td></tr>

最终的效果图：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <script src="js/jquery-3.3.1.js"></script>

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

         <script type="text/javascript" src="js/messages_zh.min.js" ></script>

         <script>

             var validateRule={

                 rules:{

                     username:{

                         required:true,//必填

                         minlength:3,

                         maxlength:6

                     },

                     email:{

                         required:true,

                         email:true

                     },

                     password:{

                         required:true,

                         minlength:3,

                         maxlength:6

                     },

                     repassword:{

                         required:true,

                         equalTo:"[name='password']"//与名为password填的内容保持一致

                     },

                     birthday:{

                         date:true//填写的内容需与日期的格式内容保持一致

                     },

                     sex:{

                         required:true

                     }

                 },

             messages:{

                     username:{

                     required:"这个是必须填写的哦！！",//必填

                     minlength:"最少得3个字符哦！！",

                     maxlength:"最多只能填6个字符哦！！"

                     },

                     sex:{

                         required:"性别必须的勾选哦！！！"

                     }

                 }

             };

             $(function(){

                 $("#registerForm").validate(validateRule);

             })

         </script>

     </head>

     <body>

         <form  id="registerForm">

             <table border="1" width="800px" height="500px" >

                 <tr><td colspan="2" align="center" >注册 </td></tr>

                 <tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>

                 <tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>

                 <tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>

                 <tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>

                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>

                 <tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女

               <label for="sex" class="error" style="display: none;"></label>

                 </td></tr>

                 <tr><td colspan="2" align="center"><input type="submit"  value="注册"/> </td></tr>

             </table>

         </form>

     </body>

 </html>

最终代码.html

jQuery常用插件与jQuery使用validation插件实现表单验证实例的更多相关文章

  1. JQuery插件使用之Validation 快速完成表单验证的几种方式

    JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...

  2. jQuery同一标签多个相同事件 return语句 表单提交实例

    如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click();   则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...

  3. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  4. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  5. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  6. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  7. jquery 表单验证插件

    其他: <form action=""> First name: <input type="text" name="FirstNam ...

  8. jQuery Validation Engine 表单验证

    功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...

  9. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

随机推荐

  1. python的py文件命名注意事项

    最近,在学习python爬虫时,用到各种库特性时,写小段代码,命名demo的py文件诸如:requests.py,json.py,csv.py.都会提示类似“module 'csv' has no a ...

  2. 使用Emmet 快速生成HTML代码

    在前端开发的过程中,一个最繁琐的工作就是写 HTML.CSS 代码.数量繁多的标签.属性.尖括号.标签闭合等,让前端们甚是苦恼.于是,我向大家推荐 Emmet,它提供了一套非常简单的语法规则,书写起来 ...

  3. [LeetCode] 422. Valid Word Square_Easy

    Given a sequence of words, check whether it forms a valid word square. A sequence of words forms a v ...

  4. Kotlin sealed class

    密封类的概念对于我这种从古代语言进化到现代语言的老古董来说还是有点绕腾的啊! 1. 密封类用来表示受限的类继承结构 解释:类中 元素值限制在某一个集合之中 2. 密封类可以有子类,但是所有的子类都必须 ...

  5. cocos2d JS-(JavaScript) 基础语法间的函数方法相互调用

    1.函数嵌套函数 function calcuate(opr, a, b) { // 定义函数,opr - -> 符号,a,b - -> 数值 //定义 + 函数 function add ...

  6. cocos2d JS-(JavaScript) 基础语法运算符

    简单且逼格高的运算符 var a = 12; console.log(-a); //输出 -12 - -> 取反 var b = a++; console.log(b); //输出 12 - - ...

  7. 一个站点配置多个App.config

    一个项目一般都只有一个配置文件.web项目中用的是web.config,但项目中有时候需要单独来配置一个文件.比如:app.config,那是否可以呢? 答案是可以的.可以在web.config中指定 ...

  8. 为CSDN博客添加站内搜索栏目

    栏目代码 <div id="panel_Search"> <img src="http://img.blog.csdn.net/201707190247 ...

  9. 43. Multiply Strings (大数乘法)

    DescriptionHintsSubmissionsDiscussSolution   Pick One Given two non-negative integers num1 and num2  ...

  10. Day7 错误和异常

    一.异常 1.异常基础 1.为了让我们的代码在出现异常的时候,整个项目依然是可以正常运行的,所以我们引入了异常处理机制! 2.在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户 ...