jquery对表单元素操作
下面是自己写的一个用Jquery验证常用的表单元素的代码
View Code
<!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>注册信心验证</title>
<script src="js/jquery-1.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$("#btnSmbit").click(function(){
//用户名验证
var name=$("#inputName");
if(name.val().length==0)
{
$("#spName").html("用户名不能为空！");
$("#spName").css("color","red");
$("#spName").css("fontSize","12");
name.focus();
return;
}else
{
$("#spName").html("");
}
//密码验证
var pwd=$("#inputPwd");
if(pwd.val()=="")
{
$("#spPwd").html("请输入你的密码");
$("#spPwd").css("color","red");
$("#spPwd").css("fontSize","12");
pwd.focus();
return;
}
else if(pwd.val().length<6)
{
$("#spPwd").html("密码不能小于6位");
$("#spPwd").css("color","red");
$("#spPwd").css("fontSize","12");
pwd.focus();
return;
}
else
{
$("#spPwd").html("");
}
//验证两次输入的密码是否一致
var nextPwd=$("#nextPwd")
if(nextPwd.val()!=pwd.val())
{
$("#spNextPwd").html("两次输入的密码不一致");
$("#spNextPwd").css("color","red");
$("#spNextPwd").css("fontSize","12");
nextPwd.focus();
}else{
$("#spNextPwd").html("");
}
//判断单选按钮是否选中
if($("input[name='sex']:radio:checked").length==0)
{
alert("请选择你的性别");
return;
}
//验证是否选中复选框
if($("input[name='chk']:checkbox:checked").length==0)
{
alert("你没有一个爱好吗？");
return;
}
// if($(":checkbox:checked").length<1)
// {
// alert("请选择一个爱好...");
// }
if($("#year").val()=="0")
{
alert("请选择年份");
return;
}
})
})
//失去焦点
//验证用户名输入
jQuery(function($){
$("#inputName").bind("blur",function(event){
var name=$("#inputName");
if(name.val().length==0)
{
$("#spName").html("用户名不能为空！");
$("#spName").css("color","red");
$("#spName").css("fontSize","12")
}else
{
$("#spName").html("");
}
})
//验证密码输入
$("#inputPwd").bind("blur",function(event)
{
var pwd=$("#inputPwd");
if(pwd.val()=="")
{
$("#spPwd").html("请输入你的密码");
$("#spPwd").css("color","red");
$("#spPwd").css("fontSize","12");
return;
}
else if(pwd.val().length<6)
{
$("#spPwd").html("密码不能小于6位");
$("#spPwd").css("color","red");
$("#spPwd").css("fontSize","12");
return;
}
else
{
$("#spPwd").html("");
}
})
//验证密码输入是否一致
$("#nextPwd").blur(function()
{
var pwd=$("#inputPwd");
var nextPwd=$("#nextPwd")
if(nextPwd.val()!=pwd.val())
{
$("#spNextPwd").html("两次输入的密码不一致");
$("#spNextPwd").css("color","red");
$("#spNextPwd").css("fontSize","12");
}else{
$("#spNextPwd").html("");
}
}
)
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
注册信息：
<table border="1">
<tr>
<td>
用户名：
</td>
<td>
<input type="text" id="inputName" /><span id="spName"></span>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="text" id="inputPwd" /><span id="spPwd"></span>
</td>
</tr>
<tr>
<td>
再次输入密码：
</td>
<td>
<input type="text" id="nextPwd" /><span id="spNextPwd"></span>
</td>
</tr>
<tr>
<td>
性别：
</td>
<td>
<input type="radio" name="sex" />男<input type="radio" name="sex" />女
</td>
</tr>
<tr>
<td>
生日：
</td>
<td>
<select id="year">
<option value="0">-请选择-</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
</select>年
<select id="month">
<option value="0">-请选择-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>月
<select id="day">
<option value="0">-请选择-</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>日
</td>
</tr>
<tr>
<td>
爱好：
</td>
<td>
<input id="Checkbox1" type="checkbox" name="chk" />上网<input id="Checkbox2" type="checkbox" name="chk"/>看电视
<input id="Checkbox3" type="checkbox" name="chk"/>K歌<input id="Checkbox4" type="checkbox" name="chk" />旅游
</td>
</tr>
<tr>
<td>
<input id="btnSmbit" type="button" value="提交" />
</td>
<td>
<input id="btnReset" type="reset" value="重 置" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
在上面的代码中主要验证了用户名的输入：用到了文本框的val()方法
密码长度的判断，两次输入的密码是否一致，这些都是很简单的，最主要的是平判断radio，checkbox和select是否选择的判断：
radio：$("input[name='sex']:radio:checked").length==0
checkbox:$("input[name='chk']:checkbox:checked").length==0
$(":checkbox:checked").length==0（如果有其他不用选择的checkbox时，这个就不能用了）
select：$("#year").val()
这里有详细介绍对select操作的http://www.cnblogs.com/shuang121/archive/2011/05/11/2043392.html
在来看看怎么获得他们的值：
用户名：name.val()
性别：$("input[name='sex']:radio:checked").val();
复选框： var ah=null;
$("input[name='chk']").each(function(){
if($(this).attr("checked"))
{
ah+=$(this).attr("value");
}
})
each：用来循环元素的
下拉框：$("#year").val()直接通过id获得值
赋值：
$("#inputName").attr("value","zhangsan");
$("#inputName").val("zhangsan");
$("input[name='sex']").each(function()
{
if($(this).attr("value")=="男")
{
$(this).attr("checked","true");
}
})
$("input[name='chk']").each(function(){
if($(this).attr("value")=="K歌" || $(this).attr("value")=="看电视")
{
$(this).attr("checked","true");
}
})
$("#year").attr("value","1984");
