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实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
2016/06/24 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
浅要分析Python程序与C程序的结合使用
2015/04/07 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
在OpenCV里使用特征匹配和单映射变换的代码详解
2019/10/23 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
高中同学聚会邀请函
2014/01/11 职场文书
《月迹》教学反思
2014/02/19 职场文书
警校毕业生自我评价
2014/04/06 职场文书
学生会竞选演讲稿
2014/04/24 职场文书
建筑安全标语
2014/06/07 职场文书
运动会的口号
2014/06/09 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
学前教育见习总结
2015/06/23 职场文书
教学工作总结范文5篇
2019/08/19 职场文书