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. 【LeetCode每天一题】Find First and Last Position of Element in Sorted Array(找到排序数组中指定元素的开始和结束下标)

    Given an array of integers nums sorted in ascending order, find the starting and ending position of ...

  2. [LeetCode] 860. Lemonade Change_Easy tag: Greedy

    At a lemonade stand, each lemonade costs $5. Customers are standing in a queue to buy from you, and ...

  3. 利用Tensorflow实现卷积神经网络模型

    首先看一下卷积神经网络模型,如下图: 卷积神经网络(CNN)由输入层.卷积层.激活函数.池化层.全连接层组成,即INPUT-CONV-RELU-POOL-FC池化层:为了减少运算量和数据维度而设置的一 ...

  4. linux神器strace

    man strace: strace - trace system calls and signals DESCRIPTION In the simplest case strace runs the ...

  5. 阿里云服务器用smtp发送邮件返失败

    阿里云使用SMTP发送邮件失败,因为阿里云服务器屏蔽了25端口,所以发送不成功,解决办法改用587发送QQ邮件,且必须使用SSL,否则不成功. 经测试QQ的465,995不能使用. https://b ...

  6. vue中使用echarts

    1.下载依赖 cnpm i echarts -S 2.模块中引入 <template> <div class="analyzeSystem"> <di ...

  7. sqli-labs(五)——盲注（boolean盲注以及时间盲注）

    第八关: 没有查询信息,输入id=1' 报错 ,也没有报错信息,这里应该是个盲注 使用boolean的盲注吧 先判断boolean的盲注可行 输入id=1' and '1'='1' %23 页面正常 ...

  8. undefined reference 问题各种情况分析

    扒自网友文章 关于undefined reference这样的问题,大家其实经常会遇到,在此,我以详细地示例给出常见错误的各种原因以及解决方法,希望对初学者有所帮助. 1.  链接时缺失了相关目标文件 ...

  9. LeetCode38.报数

    报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作  "one 1" ...

  10. Opcode是啥以及如何使用好Opcache

    转载  https://www.zybuluo.com/phper/note/1016714 啥是Opcode? 我们在日常的PHP开发过程中,应该经常会听见Opcache这个词,那么啥是Opcode ...