- 浏览: 290493 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
kane0409:
NB,解决了,我是把里面两个文件夹中的文件单独复制到eclip ...
解决initializing java tooling(1%) -
string2020:
那如果不采用Tomcat容器认证,怎么办?
Tomcat Session共享 -
hety163:
删除当前工作目录下的WORKSPACE/.metadata/. ...
解决initializing java tooling(1%) -
fox13754888170:
害的我好惨啊 每天工具不动弹 领导还以为我偷懒呢。。。。 ...
解决initializing java tooling(1%) -
ywc123zk:
十分感谢,myeclipse8.0也出现这种情况,用你的方法解 ...
解决initializing java tooling(1%)
首先加一段HTML代码:
验证函数:
要实现,首页要包含JQuery的validation.js插件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery验证</title> <script src="jquery-1.3.1.min.js" ></script> <script type="text/javascript" src="jquery.validate.js"></script> <script type="text/javascript" src="formValidatorClass.js"></script> <style type="text/css"> * { font-family: Verdana; font-size: 96%; } label { width: 10em; float: left; } label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } p { clear: both; } .submit { margin-left: 12em; } em { padding-right: 1em; vertical-align: top; color :red; } </style> </head> <body> <form class="submitForm" id="submitForm" method="get" action=""> <fieldset> <legend>表单验证</legend> <p> 用户名 <em>*</em><input id="userName" name="username" size="25" /> </p> <p> E-Mail <em>*</em><input id="email" name="email" size="25" /> </p> <p> 联系电话 <em>*</em><input id="phone" name="phone" size="25" value="" /> </p> <p> 地址 <em>*</em><input id="address" name="address" size="22"> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
验证函数:
/** * @author ming */ $(document).ready(function(){ /**//* 设置默认属性 */ $.validator.setDefaults({ submitHandler: function(form) { form.submit(); } }); // 字符验证 jQuery.validator.addMethod("stringCheck", function(value, element) { return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); }, "只能包括中文字、英文字母、数字和下划线"); // 中文字两个字节 jQuery.validator.addMethod("byteRangeLength", function(value, element, param) { var length = value.length; for(var i = 0; i < value.length; i++){ if(value.charCodeAt(i) > 127){ length++; } } return this.optional(element) || ( length >= param[0] && length <= param[1] ); }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); // 身份证号码验证 jQuery.validator.addMethod("isIdCardNo", function(value, element) { return this.optional(element) || isIdCardNo(value); }, "请正确输入您的身份证号码"); // 手机号码验证 jQuery.validator.addMethod("isMobile", function(value, element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; return this.optional(element) || (length == 11 && mobile.test(value)); }, "请正确填写您的手机号码"); // 电话号码验证 jQuery.validator.addMethod("isTel", function(value, element) { var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678 return this.optional(element) || (tel.test(value)); }, "请正确填写您的电话号码"); // 联系电话(手机/电话皆可)验证 jQuery.validator.addMethod("isPhone", function(value,element) { var length = value.length; var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/; var tel = /^\d{3,4}-?\d{7,9}$/; return this.optional(element) || (tel.test(value) || mobile.test(value)); }, "请正确填写您的联系电话"); // 邮政编码验证 jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码"); //开始验证 $('#submitForm').validate({ /**//* 设置验证规则 */ rules: { username: { required:true, stringCheck:true, byteRangeLength:[3,15] }, email:{ required:true, email:true }, phone:{ required:true, isPhone:true }, address:{ required:true, stringCheck:true, byteRangeLength:[3,100] } }, /**//* 设置错误信息 */ messages: { username: { required: "请填写用户名", stringCheck: "用户名只能包括中文字、英文字母、数字和下划线", byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)" }, email:{ required: "请输入一个Email地址", email: "请输入一个有效的Email地址" }, phone:{ required: "请输入您的联系电话", isPhone: "请输入一个有效的联系电话" }, address:{ required: "请输入您的联系地址", stringCheck: "请正确输入您的联系地址", byteRangeLength: "请详实您的联系地址以便于我们联系您" } }, /**//* 设置验证触发事件 */ focusInvalid: false, onkeyup: false, /**//* 设置错误信息提示DOM */ errorPlacement: function(error, element) { error.appendTo( element.parent()); }, }); });
要实现,首页要包含JQuery的validation.js插件
- jquery_Validation.rar (29.7 KB)
- 下载次数: 121
发表评论
-
IE8下getElementsByName的问题
2011-07-11 12:43 1206在IE8下getElementsByName(name)获取 ... -
JS解决PNG图片在IE6下不透明的问题
2010-12-20 13:20 3952可恶的IE6,各种阻碍,各种难,中国还是IE6消亡最大的障碍, ... -
jquery操作select
2010-08-05 14:24 1414获取选中项的值 $jq("#mselect op ... -
JS时间格式化(短日期)
2010-08-05 14:21 2483JS时间格式化(短日期),如new Date() 转成2010 ... -
Javascript垂直方向轮播
2010-06-04 17:56 3192<style type="text/c ... -
javascript判断浏览器核心
2010-05-31 13:07 1306/** * 判断浏览器核心 * @return I ... -
jquery.autocomplete的使用
2010-05-17 15:04 1340$jq(document).ready(functio ... -
Jquery+timers插件实现图片轮转
2010-03-22 15:59 1646很多网站上多有轮转图片,有的是用flash的,有的是用js的, ... -
Jquery 实现复制到剪贴板
2010-03-04 09:21 11579不兼容Firefox <html> < ... -
Jquery文档处理的几种效果
2010-02-21 16:40 990Jquery文档处理的几种效果 <html> ... -
Jquery的几种动态效果(animate)
2010-02-02 16:43 2579<html> <head> & ... -
Jquery show hide toggle
2010-02-01 18:41 2882<html> <head> & ... -
兼容FireFox和IE8的设为首页和添加收藏
2010-02-01 18:40 1321设置首页和添加收藏是很常用的JS脚本,但是我以前经常用的那些脚 ... -
JQuery实现淡入淡出效果
2010-01-29 17:51 2613以前一直用JavaScript,现在发现了Jquery的UI简 ... -
动态设置Ckeditor的尺寸
2010-01-27 11:55 1589<input type='textarea' i ... -
js实现拖动层,兼容IE/FireFox
2010-01-22 11:19 1592先添加一个div层 <div id='pop-ed ... -
JQuery找控件
2010-01-22 09:21 1399先将Jquery的包含进来 $("#&q ... -
收藏的JavaScript树(11种)
2010-01-20 13:39 836http://www.jb51.net/web/21947.h ... -
调用CkEditor
2010-01-19 14:20 1192首先包含以下js <script language= ... -
CKeditor配置大全
2010-01-19 12:12 17409第一步:基本配置 CKEditor + CKFinder ...
相关推荐
### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交,还支持文件上传等功能,极大地提升了用户体验并降低...
《jQuery表单验证详解》 在Web开发中,表单验证是不可或缺的一部分,它能确保用户输入的数据符合预设的规则,从而保护服务器免受不合法数据的影响,提高用户体验。jQuery,作为一款广泛使用的JavaScript库,提供了...
1. **基本概念**:jQuery表单验证的核心是通过监听用户的交互行为,如表单提交或输入字段失去焦点时,检查输入数据是否符合预设规则。这些规则可能包括必填项、邮箱格式、手机号码格式等。 2. **jQuery验证插件**:...
jQuery表单验证是一种在网页开发中常用的技术,用于在用户提交数据前检查输入的有效性,确保数据的质量和安全性。在Web应用中,表单验证是不可或缺的部分,它可以帮助减少服务器端的压力,提供更好的用户体验,及时...
Java Web Jquery表单验证 jQuery是一个流行的JavaScript库,可用于在网页上进行各种操作,包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分:FrontPage.html、write.html、end.html、style.css。 1...
在这个场景下,SSH可能与jQuery表单验证没有直接关系,但可能是项目背景的一部分,比如SSH可能用于后端服务器的数据传输或者自动化部署,确保数据的安全性。 在项目"FormValidateProject"中,很可能包含了使用...
**jQuery表单验证插件EasyValidator 2.0:打造高效且友好的用户输入体验** 在Web开发中,表单验证是不可或缺的一部分,它确保了用户提交的数据符合预期的格式和标准,从而防止无效数据的输入。jQuery作为一款广泛...
总之,这个jQuery表单验证实例展示了如何利用jQuery的灵活性和便利性,结合HTML和CSS,创建出既功能完备又具有良好交互体验的表单验证系统。通过理解和应用这些基本原理,开发者可以构建出更复杂、适应性强的表单...
本人制作的jquery表单验证插件JfomValidate 功能:可以完成绝大数页面的脚本验证效果,压缩包里有示例和调用说明。 压缩包包含文件: index.html -- 说明及示例 JfomValidate.min.js -- 插件 jquery-1.3.2.min.js -...
"jquery表单验证特效"这个主题涉及到使用jQuery进行表单验证,这是一种提高用户体验的有效方式,通过实时验证用户输入的数据,确保其正确性和完整性,避免提交无效或错误的信息。 表单验证通常是网页应用程序不可或...
jQuery作为一个强大的JavaScript库,提供了简单易用的API来进行表单验证。本实例将深入探讨如何利用jQuery实现网站会员注册表单的验证,并在用户提交form表单时进行有效控制。 首先,我们需要理解jQuery的核心概念...
在"jquery表单验证实例,对数字,字数,必填项等校验"这个项目中,我们关注的核心知识点包括: 1. **jQuery Validate插件安装与引入**:首先,你需要在HTML文件中引入`jQuery`库和`jQuery Validate`插件的JS文件。...
以下是一些关键的jQuery表单验证知识点: 1. **选择器与事件绑定**:jQuery的选择器语法简洁,可以轻松选取DOM元素。在表单验证中,我们可以使用`$('input[type=text]')`选取所有文本输入框,然后用`.on('keyup', ...
**jQuery表单验证插件详解** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而提高用户体验并减少服务器端的负担。jQuery,一个轻量级、高性能的JavaScript库,提供了丰富的API...
根据提供的文件信息,下面我将详细介绍关于jQuery表单验证中输入文本内容范围验证的相关知识点。 首先,我们需要了解什么是jQuery表单验证。jQuery表单验证是指使用jQuery这个流行的JavaScript库来增强HTML表单的...
在本文中,我们将深入探讨如何使用jQuery进行表单验证,主要基于给定的"jQuery表单验证实例代码"。jQuery库简化了JavaScript的DOM操作,使得表单验证变得更加容易和直观。以下是一些关于这个主题的关键知识点: 1. ...