jquery文本框操作(获取值与验证文本框输入等)

发布时间:2020-05-31编辑:脚本学堂
一些jquery文本框操作的例子,包括获取值、控制表单元素、对文本框的值进行选择与判断清空操作、验证文本框输入是否为空等操作。

获取值:
文本框,文本区 域:
 

$("#txt").attr("value");
$("#txt").val();

控制表单元素:
文本框,文本区域:
 

$("#txt").attr("value",'');// 清空内容
$("#txt").attr("value",'11');//填充内容

例子,对文本框的值进行选择与判断清空操作
 

$("#email").click(function(event){
  if($("#email").attr("value") == "Email"){
   $("#email").attr("value",‘‘)
  }
 });
 $("#password").click(function(event){
  if($("#password").attr("type") == "text"){
   $("#password").remove();
   $("#pass").html("<input type=‘password‘ id=‘password‘ name=‘password‘ />");
  }
  if($("#password").attr("value") == "Password"){
   $("#password").attr("value",‘‘)
  }
 });

例子
 

<input type="hidden" name="cx" value="partner-pub-7740261255677392:7064996710" />
<input type="hidden" name="ie" value="UTF-8" />
<!--文本框--><input type="text" name="q" size="25" />
<input type="submit" name="sa" value="搜索" />
<script type="text/javascript">
$(document).ready(function () {
$("input[name='q']").focus();
})</script>

验证文本框输入是否为空:
1、Html部分
 

<form>
<table>
<tr>
<td align="center"><input id="t1" type="text" size="5" msg="姓名" /> </td>
<td align="center"><input id="t2" type="text" size="5" msg="性别" /></td>
<td align="center"><input id="t3" type="text" size="5" msg="年龄" /></td>
<td align="center"><input id="t4" type="text" size="5" msg="地址" /></td>
<td align="center"><input id="t5" type="text" size="5" msg="邮箱" /></td>
<td align="center"><input id="t6" type="text" size="5" msg="省份" /></td>
</tr>
 <tr>
<td align="center"><input type="submit"onclick="return checkNull()" /></td>
</tr>
</table>
<form>

2、js部分
 

复制代码 代码示例:
<script type="text/javascript">
function checkNull()
{
var num=0;
var str="";
$("input[type$='text']").each(function(n){
if($(this).val()=="")
{
num++;
str+="?"+$(this).attr("msg")+"不能为空!rn";
}
});
if(num>0)
{
alert(str);
return false;
}
else
{
return true;
}
}
</script>

模仿了jquery validate插件来实现遍历from之后然后一个个判断是不是为空了。
核心代码:
 

$("input[type$='text']").each(function(n){
if($(this).val()=="")
{
num++;
str+="?"+$(this).attr("msg")+"不能为空!rn";
}
});

说明:
获取当前页面表单的所有input属性的并且type=text 类型的文本框再进行判断即可了,一个简单的表单为空验证例子,如果要更复杂的像每个表单input要验证的不一样, 像电话,邮件地址之类的我就可以使用jQuery Validate 插件来做了。

例子:
 

<input id="confirm_password" name="confirm_password" type="password" class="required" equalTo="#password"/>
<input id="email" name="email" class="required email"/>

注意:
class="required email" 告诉插件必须验证。