jQuery表单验证功能实例


Posted in Javascript onAugust 28, 2015

本文实例讲述了jQuery表单验证功能。分享给大家供大家参考。具体如下:

这里使用jquery实现的表单验证效果,以Ajax方式验证你的表单是否填写正确,如果验证不通过,会将表单元素背景变成红色,并给出提示信息,简单实用,jquery表单验证功能已经有很多了,本款表单验证特效看上去更简单,不懂Ajax的朋友,或许直接套用即可实现无刷新表单验证功能。

运行效果截图如下:

jQuery表单验证功能实例

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证</title>
<style type="text/css">
body, input, textarea {
 font-size:12px;
 line-height:18px;
 font-family:Verdana, Geneva, sans-serif;
}
input {width:200px;}
.submit {width:120px;}
#error {
 color:red;
 font-size:10px;
 display:none;
}
.needsfilled {
 background:red;
 color:white;
}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 // Place ID's of all required fields here.
 required = ["name", "email", "message"];
 // If using an ID other than #email or #error then replace it here
 email = $("#email");
 errornotice = $("#error");
 // The text to show up within a field when it is incorrect
 emptyerror = "Please fill out this field.";
 emailerror = "Please enter a valid e-mail.";
 $("#theform").submit(function(){ 
  //Validate required fields
  for (i=0;i<required.length;i++) {
   var input = $('#'+required[i]);
   if ((input.val() == "") || (input.val() == emptyerror)) {
    input.addClass("needsfilled");
    input.val(emptyerror);
    errornotice.fadeIn(750);
   } else {
    input.removeClass("needsfilled");
   }
  }
  // Validate the e-mail.
  if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
   email.addClass("needsfilled");
   email.val(emailerror);
  }
  //if any inputs on the page have the class 'needsfilled' the form will not submit
  if ($(":input").hasClass("needsfilled")) {
   return false;
  } else {
   errornotice.hide();
   return true;
  }
 });
 // Clears any fields in the form when the user clicks on them
 $(":input").focus(function(){  
  if ($(this).hasClass("needsfilled") ) {
   $(this).val("");
   $(this).removeClass("needsfilled");
  }
 });
}); 
</script>
</head>
<body>
<form action="mail.php" id="theform" name="theform" method="post">
 <p><label for="name">Name</label><br /><input id="name" type="text" value="" name="name" /></p>
 <p><label for="email">E-mail</label><br /><input id="email" type="text" value="" name="email" /></p>
 <p><label for="message">Message</label><br /><textarea id="message" rows="7" cols="30" name="message"></textarea></p>
 <p><input class="submit" type="submit" name="submit" value="Submit Form" /></p>
 <p id="error">表单中有错误信息!</p>
</form>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 #Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 #Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 #Javascript
jquery图片滚动放大代码分享(2)
Aug 28 #Javascript
浅谈JavaScript中的string拥有方法的原因
Aug 28 #Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 #Javascript
jquery实现左右滑动菜单效果代码
Aug 27 #Javascript
You might like
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
PHP define函数的使用说明
2008/08/27 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
一段实时更新的时间代码
2006/07/07 Javascript
用JS剩余字数计算的代码
2008/07/03 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
vue--vuex详解
2019/04/15 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
python方向键控制上下左右代码
2018/01/20 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
优秀村官事迹材料
2014/01/10 职场文书
员工安全生产责任书
2014/07/22 职场文书
连锁超市项目计划书
2014/09/15 职场文书
团日活动总结格式
2015/05/11 职场文书
环境卫生标语
2015/08/03 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android