您的位置：首页 > Web前端 > JQuery

jQuery学习笔录8（jQuery中的表单操作）

2012-06-07 17:29 309 查看

1 失去焦点 flur()

2 append(),appendTo() 插入内容

3 id ，value值等等

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryFormS.aspx.cs" Inherits="jQueryForm_jQueryFormS" %>

<!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 runat="server">
<title>Untitled Page</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
<style>
.high{
color:red;
}
</style>
</head>
<body>
<form method="post" action="jQueryFormS.aspx">
<div class="int">
<label for ="username">用户名：</label>
<input type="text" id="username" class="required" />
</div>
<div class="int">
<label for="email" >邮箱：</label>
<input type="text" id="email" class="required" />
</div>
<div class="int">
<label for="personinfo">个人资料</label>
<input type="text" id="personinfo" />
</div>
<div class="sub">
<input type="submit" value="提交" id="send" /><input type="reset" id="res" />
</div>
</form>
</body>
</html>
<script>
$("form :input.required").each(function(){
var required=$("<strong class='high'>*</strong>");
$(this).parent().append(required);
})
//失去焦点
$("form :input").blur(function(){
//我想用id去查，就是说$(this).id。。啥的，语法没想起来
if($(this).is("#username"))
{
if(this.value==""||this.value.length<6)
{
var errMsg="请输入至少6位的用户名";
$(this).parent().append("<span class='onError'>"+errMsg+"</span>");//parent()是div
}
else
{
var okMsg="OK";
$(this).parent().append("<span class='onRight'>"+okMsg+"</span>");
//append()前面是要选择的对象，后面是要在对象内插入的元素内容
//appendTo()前面是要插入的元素内容，而后面是要选择的对象
}
}

})
$("form :input").focus(function(){
$(this).parent().find(".onError").remove();
$(this).parent().find(".onRight").remove();
})

$("#send").click(function(){console.info(0)
$("form :input").parent().find(".onError").remove();
$("form :input").parent().find(".onRight").remove();
$("form .required:input").trigger("blur");console.info(1)
var error=$("form .onError").length;console.info(2)
if(error){console.info(3)
return false;
}
console.info("ok success");
})

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery input class function div xhtml

相关文章推荐

新的分享

章节导航