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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
类和原型的设计模式之复制与委托差异
Jul 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简单smarty入门程序实例
2015/06/11 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
Node.js Sequelize如何实现数据库的读写分离
2016/10/23 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
js禁止表单重复提交
2017/08/29 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
树莓派中python获取GY-85九轴模块信息示例
2013/12/05 Python
python开发之文件操作用法实例
2015/11/13 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python匿名函数用法实例分析
2019/08/03 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
春节晚会开场白
2015/05/29 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
初中政治教学反思
2016/02/23 职场文书
vue+springboot实现登录验证码
2021/05/27 Vue.js
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers