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和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 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代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php微信开发之百度天气预报
2016/11/18 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
Javascript实现的分页函数
2007/02/07 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
2020/07/22 Javascript
python的id()函数解密过程
2012/12/25 Python
Python中的zip函数使用示例
2015/01/29 Python
简单了解python模块概念
2018/01/11 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python 项目转化为so文件实例
2019/12/23 Python
Python函数式编程实例详解
2020/01/17 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
django model object序列化实例
2020/03/13 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
英国航空官网:British Airways
2016/09/11 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
中药学专业求职信
2014/05/31 职场文书
捐款仪式主持词
2015/07/04 职场文书
运动员代表致辞
2015/07/29 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript