jQuery表单验证功能实例
本文实例讲述了jQuery表单验证功能。分享给大家供大家参考。具体如下：
这里使用jquery实现的表单验证效果，以Ajax方式验证你的表单是否填写正确，如果验证不通过，会将表单元素背景变成红色，并给出提示信息，简单实用，jquery表单验证功能已经有很多了，本款表单验证特效看上去更简单，不懂Ajax的朋友，或许直接套用即可实现无刷新表单验证功能。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-table-form-check-codes/
具体代码如下：
<!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程序设计有所帮助。
相关推荐
-
jquery实现的弹出层登录和全屏层注册特效代码分享
本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下: jquery实现的弹出层登录和无刷新切换全屏层注册特效源码,是一段非常适合现代审美观的网站登录和注册效果代码,本段实例主要表现在点击登录后在当前页面内弹出登录遮罩层,而点击注册链接时,在当前页面内无刷新显示全屏注册层效果,是一款非常实用的特效代码,值得大家学习. 运行效果图: -------------------查看效果 下载源码-----------------
-
jQuery实现的漂亮表单效果代码
本文实例讲述了jQuery实现的漂亮表单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的漂亮的表单效果,将表单的输入框换成了横线,加入了背景,引入了jQuery插件,样式上特别漂亮,是一个值得借鉴的jQuery表单美化实例,而且本表单在布局上完全是基于纯CSS标签来实现,使用了CSS中的fieldset来制作表单,兼容性好. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-input-style-
-
jQuery自动添加表单项的方法
本文实例讲述了jQuery自动添加表单项的方法.分享给大家供大家参考.具体如下: 这里实现通过点击按钮动态添加一个表单输入项 <script type="text/javascript" charset="utf-8"> $(function() { var fieldCount = 1; $("#addFieldButton").click(function() { fieldCount++; if(fieldCount <=
-
jQuery实现表单步骤流程导航代码分享
本文实例讲述了jQuery实现表单步骤流程导航.分享给大家供大家参考.具体如下: jQuery表单步骤流程导航是一款多步骤进度,多个提交的实现一步一步填写表单提交信息代码,每次填写完信息时都会提醒是否提交,如果想对信息进行再次修改,也可以进行返回操作,页面效果简洁大方,红黑搭配很经典,是一款非常实用的特效代码,值得大家学习. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家
-
jquery实现表单验证并阻止非法提交
代码检测textarea内填写的长度,未填写时提示需要重新填写,少于15字符时提示需要长于15字符,成功时显示所填写建议. <script type="text/javascript"> //jQuery代码 function confirm() { if($("#advice").val().length == 0) { alert("We can't see your advice. Maybe you should fill the fo
-
jquery实现的用户注册表单提示操作效果代码分享
本文实例讲述了jquery实现的用户注册表单提示操作效果.分享给大家供大家参考.具体如下: jQuery实现的用户注册表单上方弹窗提示文字特效源码,是一段不仅可以在输入的表单上方提示注意事项,同时也可以进行输入验证的代码,是一款非常实用的特效代码,值得大家学习. 运行效果图: -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分
-
基于Jquery实现表单验证
有时在我们注册账户.登陆系统时,当所有验证通过方可提交 这就需要Jquery来实现表单验证,今天分享给小伙伴们一段基于Jquery实现表单验证的代码. <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Reg</title> <style> .state1{ color
-
jquery实现表单输入时提示文字滑动向上效果
本文实例讲述了jquery实现表单输入时提示文字滑动向上效果.分享给大家供大家参考.具体如下: 这里基于jQuery实现的表单输入框提示效果,当不输入的时候,提示文字就显示在输入框中,当鼠标点击文本框要输入文字的时候,提示文字向滑出输入框,好像很个性也很智能的样子,用户体验比较不错,运用了CSS3的部分属性,因此在测试时,请尽量要用高版本的IE9或chrome和火狐等网页浏览器. 运行效果截图如下: 具体代码如下: <!doctype html> <html> <head&g
-
jQuery下拉美化搜索表单效果代码分享
本文实例讲述了jQuery下拉美化搜索表单效果.分享给大家供大家参考.具体如下: JQuery下拉美化搜索表单样式代码是一款美化下拉框的表单,样式已写好,需要的朋友改一下就可以用了. 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery下拉美化搜索表单效果代码如下 <head> <meta http-equiv="Content-Type"
-
jQuery表单验证功能实例
本文实例讲述了jQuery表单验证功能.分享给大家供大家参考.具体如下: 这里使用jquery实现的表单验证效果,以Ajax方式验证你的表单是否填写正确,如果验证不通过,会将表单元素背景变成红色,并给出提示信息,简单实用,jquery表单验证功能已经有很多了,本款表单验证特效看上去更简单,不懂Ajax的朋友,或许直接套用即可实现无刷新表单验证功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-form-check-c
-
AngularJS学习笔记之表单验证功能实例详解
本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="
-
AngularJS自定义表单验证功能实例详解
本文实例讲述了AngularJS自定义表单验证功能.分享给大家供大家参考,具体如下: Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox),也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max). 在自定义的指令中,我们可以添加我们的验证方法到ngModelController的$validators对象上.为了取得这个c
-
jQuery基于正则表达式的表单验证功能示例
本文实例讲述了jQuery基于正则表达式的表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
jQuery扩展+xml实现表单验证功能的方法
本文实例讲述了jQuery扩展+xml实现表单验证功能的方法.分享给大家供大家参考,具体如下: 此处表单验证jQuery 引用jquery.1.8.2.js,md5.js 扩展提示信息,扩展验证方法(如果有正则表达式的话可以用默认方法) String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");};//ie下解决trim 方法问题 (function($) { $.elementVal = new
-
jQuery完成表单验证的实例代码(纯代码)
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <head> <meta charset=utf-8" /> <title>表单验证</title> <link href="css/style1.css" rel="external nofollow" rel="stylesheet" type="text/css"
-
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
废话不多说了,直接给大家贴代码,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .sspan{ background: #28a54c; color: #fff; margi
-
jquery表单验证实例仿Toast提示效果
HTML内容部分 <div class="classname"> <label for="">请输入您的手机号码</label> <input type="text" id="MobilePhone"/> <input type="text" /> --> </div> 提示html及样式部分 <div id="e
-
JS实现的简单表单验证功能完整实例
本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&
-
基于Bootstrap 3 JQuery及RegExp的表单验证功能
昨天小编在研究regexp,今天小编抽空给大家分享表单验证. 主要功能: 用户名必须在5-25个字符之内,而且只能使用字母.数字或下划线,否则不让通过. 密码必须在5-25个字符之内,而且只能使用字母或数字(大小写敏感),否则不让通过. 根据不同密码程度,下面的low.medium和high会改变背景颜色. 确认密码就不说啦. 验证码只是做了个样子,反正就是设成必须是5个数字. checkbox必须打勾啦,不然不让通过. 点击注册按钮,会有相应的提示框(可关闭)弹出. HTML: <body>