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 相关文章推荐
基于jQuery的弹出框插件
Mar 18 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
Vue.js基础知识小结
Jan 13 Javascript
js css自定义分页效果
Feb 24 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
vue实现数据控制视图的原理解析
Jan 07 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
php预定义变量使用帮助(带实例)
2013/10/30 PHP
php简单分页类实现方法
2015/02/26 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Python实现的ini文件操作类分享
2014/11/20 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
Django 使用logging打印日志的实例
2018/04/28 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
分公司经理任命书
2014/06/05 职场文书
个人工作表现自我评价
2015/03/06 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
Python基础之pandas数据合并
2021/04/27 Python
java设计模式--七大原则详解
2021/07/21 Java/Android