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. 【Java】-NO.16.EBook.4.Java.1.006-【疯狂Java讲义第3版 李刚】- 垃圾回收

    1.0.0 Summary Tittle:[Java]-NO.16.EBook.4.Java.1.006-[疯狂Java讲义第3版 李刚]- 垃圾回收 Style:EBook Series:Java ...

  2. elasticsearch6.0.0源码导入到idea总结

    由于elasticsearch使用了gradle管理依赖,进行构建,再加上对gradle没有接触过. 因此,导入到idea中遇到问题非常多.这里大致罗列下并说明解决方法. 环境背景 gradle版本: ...

  3. jenkins 新增用户和修改用户名密码

    在某些条件下,jenkins是不允许注册用户的,这是,你可以采用如下的方式来新增用户,对于老的用户,忘记密码了,使用如下方式来重置密码. 1.系统管理-->管理用户 ----> 新建用户 ...

  4. js模拟栈---进制转化。十进制转任意进制进制,任意进制转十进制

    var Stack = (function(){ var items = new WeakMap(); //先入后出,后入先出 class Stack{ constructor(){ items.se ...

  5. phpstudy安装redis

    php安装扩展,首先要在php官网下载相应的库文件, http://pecl.php.net/package/redis 下载相应版本的文件,首先phpinfo()看看当前的php环境版本等等   我 ...

  6. python模拟艺龙网登录requests包

    对比urllib.urllib2与requests不难发现,前者功能更强大,但是实现一个功能要写很多的代码,后者,requests代码简洁,用起来更快速 下面一个模拟登录的代码:看看吧一共也没有几行就 ...

  7. Java中通过Class类获取Class对象的方法详解

    方式1:通过Object类的getObject()方法 Person p = new Person(); Class c = p.getClass(); 方式2: 通过 类名.class 获取到字节码 ...

  8. redhat7.5在H3C机器上黑屏无显

    现象:H3C机器上,PXE安装/ISO安装系统,多用户模式启动,过内核启动界面后,屏幕黑屏无显,但是可以通过SSH登陆系统,服务正常 环境:redhat7.5/H3C R4900G3/Purely平台 ...

  9. 向量体系结构(2)----SIMD指令集扩展和GPU

    进行SIMD多媒体扩展的设计,源于一个很容易观察到的事实: 许多多媒体应用程序操作的数据类型比对32位处理器进行针对性优化的数据类型更窄一些. 图像三基色,都是8位.音频采样也都是8位和16位来表示. ...

  10. jQuery选择器--:eq(index)、:lt(index)和:gt(index)

       :eq(index) 概述 匹配一个给定索引值的元素 参数 index  从 0 开始计数    :gt(index) 概述 匹配所有大于给定索引值的元素 参数 index  从 0 开始计数 ...