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插件实现表单验证
初始时点击注册的效果：
<!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插件实现表单验证实例的更多相关文章
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- jQuery同一标签多个相同事件 return语句 表单提交实例
如form表单的submit,a标签都自带一个鼠标单击事件,其实我们还可以额外填加单击事件 如:$(':submit').click(); 则自定义的单击事件先执行,然后才是标签自带的单击事件(c ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...
- jquery 表单验证插件
其他: <form action=""> First name: <input type="text" name="FirstNam ...
- jQuery Validation Engine 表单验证
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
随机推荐
- 【Tools】-NO.4.Tools.1.VM.1.001-【VMware Workstation PRO 12 Install CentOS 7.1】-
1.0.0 Summary Tittle:[Tools]-NO.4.Tools.1.VM.1.001-[VMware Workstation PRO 12 Install CentOS 7.1]- S ...
- 利用TensorFlow实现多元线性回归
利用TensorFlow实现多元线性回归,代码如下: # -*- coding:utf-8 -*- import tensorflow as tf import numpy as np from sk ...
- Golang mysql
还是那句话,服务器嘛,每个数据库支持,那成啥子啦嘛! 好吧,今天,就让Go能连上数据库,当然是之前给你铺垫的MySql的啦,哈哈 一.安装第三方包支持访问mysql数据库 #go get github ...
- 北京时间转为时间搓 标准时间转为UTC
int standard_to_stamp(char *str_time) { struct tm stm; int iY, iM, iD, iH, iMin, ...
- AI案列 三条路
在生成点生成带有颜色的小球,小球走对应颜色的路 先做好三个小球,做成预制体 对应颜色的小球,除了自身颜色,其他颜色不要选 新建脚本: using System.Collections; using S ...
- python windows 安装pandas,numpy....
用cmd进入python的安装目录的sripts文件夹下,输入pip install pandas 等它自己下载安装完成,提示
- iframe中父页面与子页面的传值方法
涉及到iframe传值的情况有这么几种:(1)父页面给iframe中的子页面传值(2)子页面调用父页面中的函数(3)iframe中的子页面给父页面传值(4)兄弟iframe之间的传值 下面来逐一看一下 ...
- fiddler2抓包数据工具使用教程
一款免费且功能强大的数据包抓取软件.它通过代理的方式获取程序http通讯的数据,可以用其检测网页和服务器的交互情况,能够记录所有客户端和服务器间的http请求,支持监视.设置断点.甚至修改输入输出数据 ...
- gpg无法生成密钥对的问题
今天在archlinux中生成key的过程中,发现卡在收集随机信息的步骤了. 而在windows系统中启动kleopatra之后,一直是一个任务条,显示loading certificate cach ...
- php aes128加密
//[加密数据]AES 128 ECB模式 public function aesEncrypt($str){ $screct_key = Yii::$app->params['encryptK ...