表单验证JqueryWord格式文档下载.docx
- 文档编号:18123416
- 上传时间:2022-12-13
- 格式:DOCX
- 页数:11
- 大小:21.36KB
表单验证JqueryWord格式文档下载.docx
《表单验证JqueryWord格式文档下载.docx》由会员分享,可在线阅读,更多相关《表单验证JqueryWord格式文档下载.docx(11页珍藏版)》请在冰豆网上搜索。
#pas2Tip"
密码为空或者和上面的密码不致"
input[name=ustype]"
).click(function(){
varustype=$(this).val();
varustypemsg=(ustype==1)?
'
企业'
:
个
人'
;
#ustypeTip"
您选择的是"
+ustypemsg+'
会员'
})
<
/script>
formaction="
#"
用户名:
input
type="
text"
id="
name"
/>
spanid="
nameTip"
/span>
密码:
inputtype="
password"
pas1"
pas1Tip"
确认密码:
pas2"
pas2Tip"
用户类型:
radio"
value="
0"
name="
ustype"
checked="
checked"
个人
1"
企业<
ustypeTip"
submit"
提交"
/form>
=====================================
1.<
scriptsrc="
http:
//>
2.<
3.
4.$(function(){
5.$('
#name'
).blur(function(){$('
#nameT'
).html($(this).attr('
value'
)=='
?
"
strongstyle='
color:
#f00;
×
名字不能为空<
/strong>
"
:
#62842b;
输入正确<
6.$('
#pas1'
#pas1T'
密码不能为空<
7.$('
#pas2'
#pas2T'
)!
).attr('
)?
确认密码不正确<
8.$("
9.varustype=$(this).attr('
10.varustypemsg=(ustype==1)?
个人'
11.$("
#ustypeT"
12.});
13.});
14.
15.<
16.<
17.用户名:
nameT"
18.密码:
pas1T"
19.确认密码:
pas2T"
20.用户类型:
个人<
ustypeT"
21.<
22.<
代码我就大体解释一下:
$(function(){});
是函数是一对出现
$('
).blur(function(){});
这个是当id为name的输入框失去焦点时的事件
$(this).attr('
判断这个id的值是否为空
).html();
给id为pas2的标内赋予html样式
简单吧。
。
弄完这个。
jquery大体的架构你应该和我一样也明白了吧。
o(∩_∩)o...
Jquery表单验证插件(转)
Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用。
1、JQuery框架软件包下载地址
2、Form插件下载地址
Form插件的简单入门
第一步:
先增加一个表单
formid="
myForm"
action="
comment.php"
method="
post"
Name:
Comment:
textareaname="
comment"
/textarea>
SubmitComment"
第二步:
jquery.js和form.js文件的包含
head>
src="
path/to/jquery.js"
path/to/form.js"
//waitfortheDOMtobeloaded
$(document).ready(function(){
//bind'
myForm'
andprovideasimplecallbackfunction
#myForm'
).ajaxForm(function(){
alert("
Thankyouforyourcomment!
/head>
3、Form插件的详细使用方法及应用实例
============================
该插件的作者在介绍form.js时,说了这样的一句话:
SubmittingaformwithAJAXdoesn'
tgetanyeasierthanthis!
表单插件API
英文原文:
表单插件API提供了几个方法,让你轻松管理表单数据和进行表单提交。
ajaxForm
增加所有需要的事件监听器,为AJAX提交表单做好准备。
ajaxForm不能提交表单。
在document的ready函数中,使用ajaxForm来为AJAX提交表单进行准备。
ajaxForm接受0个或1个参数。
这个单个的参数既可以是一个回调函数,也可以是一个Options对象。
可链接(Chainable):
可以。
实例:
#myFormId'
).ajaxForm();
ajaxSubmit
马上由AJAX来提交表单。
大多数情况下,都是调用ajaxSubmit来对用户提交表单进行响应。
ajaxSubmit接受0个或1个参数。
//绑定表单提交事件处理器
).submit(function(){
//提交表单
$(this).ajaxSubmit();
//为了防止普通浏览器进行表单提交和产生页面导航(防止页面刷新?
)返回false
returnfalse;
formSerialize
将表单串行化(或序列化)成一个查询字符串。
这个方法将返回以下格式的字符串:
name1=value1&
name2=value2。
不能,这个方法返回一个字符串。
varqueryString=$('
).formSerialize();
//现在可以使用$.get、$.post、$.ajax等来提交数据
$.post('
myscript.php'
queryString);
fieldSerialize
将表单的字段元素串行化(或序列化)成一个查询字符串。
当只有部分表单字段需要进行串行化(或序列化)时,这个就方便了。
不能,这个方法返回一个字符串。
#myFormId.specialFields'
).fieldSerialize();
fieldValue
返回匹配插入数组中的表单元素值。
从0.91版起,该方法将总是以数组的形式返回数据。
如果元素值被判定可能无效,则数组为空,否则它将包含一个或多于一个的元素值。
不能,该方法返回数组。
//取得密码输入值
varvalue=$('
#myFormId:
password'
).fieldValue();
alert('
Thepasswordis:
'
+value[0]);
resetForm
通过调用表单元素原有的DOM方法,将表单恢复到初始状态。
).resetForm();
clearForm
清除表单元素。
该方法将所有的文本(text)输入字段、密码(password)输入字段和文本区域(textarea)字段置空,清除任何select元素中的选定,以及将所有的单选(radio)按钮和多选(checkbox)按钮重置为非选定状态。
).clearForm();
clearFields
清除字段元素。
只有部分表单元素需要清除时才方便使用。
).clearFields();
Options对象
ajaxForm和ajaxSubmit都支持众多的选项参数,这些选项参数可以使用一个Options对象来提供。
Options只是一个JavaScript对象,它包含了如下一些属性与值的集合:
target
指明页面中由服务器响应进行更新的元素。
元素的值可能被指定为一个jQuery选择器字符串,一个jQuery对象,或者一个DOM元素。
默认值:
null。
url
指定提交表单数据的URL。
表单的action属性值
type
指定提交表单数据的方法(method):
“GET”或“POST”。
表单的method属性值(如果没有找到默认为“GET”)。
beforeSubmit
表单提交前被调用的回调函数。
“beforeSubmit”回调函数作为一个钩子(hook),被提供来运行预提交逻辑或者校验表单数据。
如果“beforeSubmit”回调函数返回false,那么表单将不被提交。
“beforeSubmit”回调函数带三个调用参数:
数组形式的表单数据,jQuery表单对象,以及传入ajaxForm/ajaxSubmit中的Options对象。
表单数组接受以下方式的数据:
[{name:
username'
value:
jresig'
},{name:
secret'
}]
null
success
表单成功提交后调用的回调函数。
如果提供“success”回调函数,当从服务器返回响应后它被调用。
然后由dataType选项值决定传回responseText还是responseXML的值。
dataType
期望返回的数据类型。
null、“xml”、“script”或者“json”其中之一。
dataType提供一种方法,它规定了怎样处理服务器的响应。
这个被直接地反映到jQuery.httpData方法中去。
下面的值被支持:
xml'
:
如果dataType=='
,将把服务器响应作为XML来对待。
同时,如果“success”回调方法被指定,将传回responseXML值。
json'
,服务器响应将被求值,并传递到“success”回调方法,如果它被指定的话。
script'
,服务器响应将求值成纯文本。
null(服务器返回responseText值)
semantic
Booleanflagindicatingwhetherdatamustbesubmittedinstrictsemanticorder(slower).Notethatthenormalformserializationisdoneinsemanticorderwiththeexceptionofinputelementsoftype="
image"
.Youshouldonlysetthesemanticoptiontotrueifyourserverhasstrictsemanticrequirementsandyourformcontainsaninputelementoftype="
.
布尔标志,表示数据是否必须严格按照语义顺序(slower?
)来进行提交。
注意:
一般来说,表单已经按照语义顺序来进行了串行化(或序列化),除了type="
的input元素。
如果你的服务器有严格的语义要求,以及表单中包含有一个type="
的input元素,就应该将semantic设置为true。
(译注:
这一段由于无法理解,翻译出来可能语不达意,但请达人指正。
)
false
resetForm
布尔标志,表示如果表单提交成功是否进行重置。
Defaultvalue:
null
clearForm
布尔标志,表示如果表单提交成功是否清除表单数据。
null
//准备好Options对象
varoptions={
target:
#divToUpdate'
url:
comment.php'
success:
function(){
Thanksforyourcomment!
}};
//将options传给ajaxForm
).ajaxForm(options);
Options对象还可以用来将值传递给jQuery的$.ajax方法。
如果你熟悉$.ajax所支持的options,你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。
Jquery表单验证
代码:
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
title>
/title>
styletype="
text/css"
body{font:
12px/19pxArial,Helvetica,sans-serif;
color:
#666;
}
formdiv{margin:
5px0;
.intlabel{float:
left;
width:
100px;
text-align:
right;
.intinput{padding:
1px1px;
border:
1pxsolid#ccc;
height:
16px;
.sub{padding-left:
.subinput{margin-right:
10px;
.formtips{width:
200px;
margin:
2px;
padding:
.onError{
background:
#FFE0E9url(../img/reg3.gif)no-repeat0center;
padding-left:
25px;
.onSuccess{
#E9FBEBurl(../img/reg4.gif)no-repeat0center;
.high{
red;
/style>
--引入jQuery-->
../scripts/jquery-1.3.1.js"
type="
//<
[CDATA[
$(function(){
//如果是必填的,则加红星标识.
form:
input.required"
).each(function(){
var$required=$("
strongclass='
high'
*<
//创建元素
$(this).parent().append($required);
//然后将它追加到文档中
//文本框失去焦点后
input'
).blur(function(){
var$parent=$(this).parent();
$parent.find("
.formtips"
).remove();
//验证用户名
if($(this).is('
#username'
)){
if(this.value=="
||this.value.length<
6){
varerrorMsg='
请输入至少6位的用户名.'
$parent.append('
spanclass="
formtipsonError"
+errorMsg+'
}else{
varokMsg='
输入正确.'
formtipsonSuccess"
+okMsg+'
//验证邮件
#email'
||(this.value!
="
&
&
!
/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
varerrorM
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 表单 验证 Jquery