jQuery常用插件与jQuery使用validation插件实现表单验证实例

jQuery常用插件

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

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

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

表单校验

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

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

使用validation插件实现表单验证

初始时点击注册的效果：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/jquery-3.3.1.js"></script>
 7
 8     </head>
 9     <body>
10         <form  id="registerForm">
11             <table border="1" width="800px" height="500px" >
12                 <tr><td colspan="2" align="center" >注册 </td></tr>
13                 <tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>
14                 <tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>
15                 <tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>
16                 <tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>
17                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
18                 <tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
19
20                 <label for="sex" class="error"></label>
21                 </td></tr>
22                 <tr><td colspan="2" align="center"><input type="submit"  value="注册"/> </td></tr>
23
24             </table>
25         </form>
26     </body>
27 </html>

未使用插件时.html

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/jquery-3.3.1.js"></script>
 7         <script src="js/jquery.validate.min.js"></script>
 8
 9         <script>
10             var validateRule={
11                 rules:{
12                     username:{
13                         required:true,//必填
14                         minlength:3,
15                         maxlength:6
16                     },
17                     email:{
18                         required:true,
19                         email:true
20                     },
21                     password:{
22                         required:true,
23                         minlength:3,
24                         maxlength:6
25                     },
26                     repassword:{
27                         required:true,
28                         equalTo:"[name=‘password‘]"//与名为password填的内容保持一致
29
30                     },
31                     birthday:{
32                         date:true//填写的内容需与日期的格式内容保持一致
33                     },
34                     sex:{
35                         required:true
36                     }
37
38                 },
39
40             };
41             $(function(){
42                 $("#registerForm").validate(validateRule);
43             })
44
45         </script>
46
47
48     </head>
49     <body>
50         <form  id="registerForm">
51             <table border="1" width="800px" height="500px" >
52                 <tr><td colspan="2" align="center" >注册 </td></tr>
53                 <tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>
54                 <tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>
55                 <tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>
56                 <tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>
57                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
58                 <tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
59
60
61                 </td></tr>
62                 <tr><td colspan="2" align="center"><input type="submit"  value="注册"/> </td></tr>
63
64             </table>
65         </form>
66     </body>
67 </html>

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

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

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/jquery-3.3.1.js"></script>
 7         <script src="js/jquery.validate.min.js"></script>
 8         <script type="text/javascript" src="js/messages_zh.min.js" ></script>
 9         <script>
10             var validateRule={
11                 rules:{
12                     username:{
13                         required:true,//必填
14                         minlength:3,
15                         maxlength:6
16                     },
17                     email:{
18                         required:true,
19                         email:true
20                     },
21                     password:{
22                         required:true,
23                         minlength:3,
24                         maxlength:6
25                     },
26                     repassword:{
27                         required:true,
28                         equalTo:"[name=‘password‘]"//与名为password填的内容保持一致
29
30                     },
31                     birthday:{
32                         date:true//填写的内容需与日期的格式内容保持一致
33                     },
34                     sex:{
35                         required:true
36                     }
37
38                 },
39
40             };
41             $(function(){
42                 $("#registerForm").validate(validateRule);
43             })
44
45         </script>
46
47
48     </head>
49     <body>
50         <form  id="registerForm">
51             <table border="1" width="800px" height="500px" >
52                 <tr><td colspan="2" align="center" >注册 </td></tr>
53                 <tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>
54                 <tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>
55                 <tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>
56                 <tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>
57                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
58                 <tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
59
60
61                 </td></tr>
62                 <tr><td colspan="2" align="center"><input type="submit"  value="注册"/> </td></tr>
63
64             </table>
65         </form>
66     </body>
67 </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>

最终的效果图：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="js/jquery-3.3.1.js"></script>
 7         <script src="js/jquery.validate.min.js"></script>
 8         <script type="text/javascript" src="js/messages_zh.min.js" ></script>
 9         <script>
10             var validateRule={
11                 rules:{
12                     username:{
13                         required:true,//必填
14                         minlength:3,
15                         maxlength:6
16                     },
17                     email:{
18                         required:true,
19                         email:true
20                     },
21                     password:{
22                         required:true,
23                         minlength:3,
24                         maxlength:6
25                     },
26                     repassword:{
27                         required:true,
28                         equalTo:"[name=‘password‘]"//与名为password填的内容保持一致
29
30                     },
31                     birthday:{
32                         date:true//填写的内容需与日期的格式内容保持一致
33                     },
34                     sex:{
35                         required:true
36                     }
37
38                 },
39             messages:{
40                     username:{
41                     required:"这个是必须填写的哦！！",//必填
42                     minlength:"最少得3个字符哦！！",
43                     maxlength:"最多只能填6个字符哦！！"
44                     },
45                     sex:{
46                         required:"性别必须的勾选哦！！！"
47                     }
48                 }
49             };
50             $(function(){
51                 $("#registerForm").validate(validateRule);
52             })
53
54         </script>
55
56
57     </head>
58     <body>
59         <form  id="registerForm">
60             <table border="1" width="800px" height="500px" >
61                 <tr><td colspan="2" align="center" >注册 </td></tr>
62                 <tr><td align="right" width="100px">用户名：</td><td align="left"><input type="text" name="username"/></td></tr>
63                 <tr><td align="right">邮箱：</td><td align="left"><input type="text" name="email"/></td></tr>
64                 <tr><td align="right">密码：</td><td align="left"><input type="password" name="password"/></td></tr>
65                 <tr><td align="right">确认密码：</td><td align="left"><input type="password" name="repassword" /></td></tr>
66                 <tr><td align="right">出生年月日：</td><td align="left"><input type="text" name="birthday"/></td></tr>
67                 <tr><td align="right">性别：</td><td align="left"><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
68               <label for="sex" class="error" style="display: none;"></label>
69                 </td></tr>
70                 <tr><td colspan="2" align="center"><input type="submit"  value="注册"/> </td></tr>
71
72             </table>
73         </form>
74     </body>
75 </html>

最终代码.html

原文地址：https://www.cnblogs.com/jiguiyan/p/10546964.html

时间： 2024-08-03 19:13:13

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

jquery 一个简单的表单验证实例

表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

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

如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件如:$(':submit').click(); 则自定义的单击事件先执行,然后才是标签自带的单击事件,如果在自定义事件函数中有return false则标签自带的事件不生效,有return true则生效这常用来做表单验证,因为填写项不完整或错误是不允许提交的原文地址:https://www.cnblogs.com/alex-hrg/p/9589137.html

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

作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例讲解应用.it's perfect. 首先记录一些使用过程中,爱犯的错误: 1>忘记给表单form添加id属性 2>input这些表单标签必须id属性和name属性名字一样.例如:<input type="text" id="name" name=&q

jquery validate表单验证插件-推荐

1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

jQuery Validation Engine 表单验证

功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, Firefox, Safari, Opera 10+ 版本: jQuery v1.7+ jQuery Validation Engine v2.6.2 相对 2.2.4 版本的一些区别: 部分参数功能发生变化: 输入控件可以不写 id 属性: 参数 onSuccess 和 onFailure 改为

简单的Jquery表单验证

本段代码举了一个最简单的表单验证实例,就是判断输入框是否为空而已,大家可以根据这个原理,加入正则表达式判断,实现各种功能强大的表单验证功能 <html> <head> <title>Validate empty fields</title> <style type="text/css"> body{font-family:"Trebuchet MS",

表单验证(ASP.NET+jquery.validationEngine.js)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">

jQuery插件——Validation Plugin表单验证

jQuery表单验证插件:https://plugins.jquery.com/tag/validate/ jQuery Validation插件是最常用的插件之一:http://jqueryvalidation.org/ 一.基本API rules里面的“username”是input中的“name”,不是“id”. 表单验证,主要是俩:一是规则,二是提示信息当在使用validate插件的时候: 使用validate()方法的时候将debug设置为true,那么表单不会提交,只进行检查,调试