jQuery完成表单验证的实例代码(纯代码)


Posted in jQuery onSeptember 30, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!doctype html>
 <head>
 <meta charset=utf-8" />
 <title>表单验证</title>
 <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css" />
 <!-- 引入jQuery -->
 <script src="jquery/jquery.js" type="text/javascript"></script>
 <script>
 $(document).ready(function() {
 $("form :input.required").each(function() {
 var $required=$("<strong class=high>*</strong>");
 $(this).parent().append($required);
 });
 $("form :input").blur(function() {
 var $parent=$(this).parent();
 $parent.find(".formtips").remove();
 if($(this).is("#username")){
 if(this.value==""||this.value.length<6){
 var errorMsg='请输入至少六位的用户名';
 $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
 }else{
 var okMsg='输入正确';
 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
 return false;
 }
 }
 if($(this).is("#email")){
 if(this.value==""||(this.value!==""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
 var errorMsg='请输入正确的E—mail地址';
 $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
 }else{
 var okMsg='输入正确';
 $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
 }
 }
 });
 $("#send").click(function() {
 $("form .required:input").trigger('blur');
 var numError=$("form .onError").length;
 if(numError){
 return false;
 }
 alert("注册成功,密码已发到你的邮箱,请查收。");
 });
 });
 </script>
 </head>
 <body>
 <form method="post" action="">
 <div class="int">
 <label for="username">用户名:</label>
 <input type="text" id="username" class="required" />
 </div>
 <div class="int">
 <label for="email">邮箱:</label>
 <input type="text" id="email" class="required" />
 </div>
 <div class="int">
 <label for="personinfo">个人资料:</label>
 <input type="text" id="personinfo" />
 </div>
 <div class="sub">
 <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
 </div>
 </form>
 </body>
 </html>

总结

以上所述是小编给大家介绍的jQuery完成表单验证的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 #jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 #jQuery
jQuery选择器之子元素过滤选择器
Sep 28 #jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
jquery实现左右轮播图效果
Sep 28 #jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
You might like
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
索趣科技的答案
2007/02/07 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python与shell的3种交互方式介绍
2015/04/11 Python
全面了解python字符串和字典
2016/07/07 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
SQL数据库笔试题
2016/03/08 面试题
人力资源经理的岗位职责
2014/03/02 职场文书
小学生评语集锦
2014/04/18 职场文书
租房协议书
2014/09/12 职场文书
先进教师个人总结
2015/02/11 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers