jQuery的length 属性可以获取包含 jQuery 对象中元素的数目，所以获取input的个数可用如下代码实现
$('input')length; // 所有input的数量，包括文本框、单选按钮、复选框、隐藏域等$('input:text')length; // 文本框的数量
示例代码如下
创建Html元素
<div class="box"><span>点击按钮获取文本框数量：</span><br>
<div class="content">
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="jack"/>
<input type="text" name="url" value="tom"/>
</div>
<input type="button" value="点击获取文本框数量">
</div>
设置css样式
divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}divbox span{color:#999;font-style:italic;}
divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}
input[type='text']{width:200px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}
编写jquery代码
$(function(){$(":button")click(function() {
alert($("input:text")length);
})
})
观察效果
查看示例：DEMO
打包下载
使用很简单。
复制代码
代码如下:
$('#pass')passwordStrength();
XHTML
复制代码
代码如下:
<input
type="password"
id="pass"
class="input"
/></p>
<div
id="passwordStrengthDiv"
class="is0"></div>
<p><label>确认密码：</label>
<input
type="password"
id="repass"
class="input"
/></p>
注意：id#passwordStrengthDiv的DIV是用来加载强度的，你也可以自定义ID，但调用时就要给参数赋值：
复制代码
代码如下:
targetDiv
:
'#ID'
//自定义加载的ID
载入JS和CSS：
复制代码
代码如下:
<link
rel="stylesheet"
type="text/css"
href="style/maincss"
/>
<script
type="text/javascript"
src="jqueryjs"></script>
<script
type="text/javascript"
src="jquerypasswordStrengthjs"></script>
<script
type="text/javascript">
$(function(){
$('#pass')passwordStrength();
});
</script>
<script type="text/javascript">
$(function(){
$("button")click(function(){
var $val=$("[type=password]")val();
var $val2=$("[type=text]")val();
var dp=$("[type=text]")css("display");
if(dp=="none"){
$(this)html("密码隐藏");
$("[type=text]")val($val);
$("[type=password]")hide();
$("[type=text]")show();
}else{
$("[type=password]")val($val2);
$("[type=password]")show();
$("[type=text]")hide();
$(this)html("密码可见");
}
})
})
</script>
</head>
<body>
<input type="password" />
<input type="text" style="display:none;"/>
<button >密码可见</button>
</body>
当密码可见的时候输入也有效
<script type="text/javascript">
//循环获取所有的input框
//定义全局变量
var NI=false;
var US=false;
var PS=false;
var RPS=false;
var EM=false;
var PH=false;
//给每个input绑定获取焦点事件
//昵称
$('input[name="nickname"]')focus(function(){
$(this)next()css({color:'#979898',display:'block'});
$(this)next()html('请输入常用昵称');
});
//账户
$('input[name="username"]')focus(function(){
$(this)next()css({color:'#979898',display:'block'});
$(this)next()html('请输入6-16个字符,首字符不能为数字');
});
//密码
$('input[name="password"]')focus(function(){
$(this)next()css({color:'#979898',display:'block'});
$(this)next()html('请输入6-16个字符,首字符不能为数字');
});
//重复密码
$('input[name="repassword"]')focus(function(){
$(this)next()css({color:'#979898',display:'block'});
$(this)next()html('请再次输入密码');
});
//邮箱
$('input[name="email"]')focus(function(){
$(this)next()css({color:'#979898',display:'block'});
$(this)next()html('请输入常用昵称');
});
//电话
$('input[name="phone"]')focus(function(){
$(this)next()css({color:'#979898',display:'block'});
$(this)next()html('请输入常用手机号码');
});
//给每个input绑定丧失焦点事件
//昵称
$('input[name="nickname"]')blur(function(){
var v=$(this)val();
var reg=/^{1,16}$/;
if(!regtest(v)){
$(this)next()html('✘输入有误,请重新输入');
$(this)next()css('color','red');
}else{
$(this)next()html('✔');
$(this)next()css('color','green');
NI=true;
}
});
//账户
$('input[name="username"]')blur(function(){
var v=$(this)val();
var input=$(this);
var reg=/^\w{6,16}$/;
if(!regtest(v)){
inputnext()html('✘输入有误,请重新输入');
inputnext()css('color','red');
}else{
//发送ajax判断账户是否可用
$post('{:U("Admin/Admin/select")}',{username:v},function(data){
if(data==0){
inputnext()html('✘用户名已存在');
inputnext()css('color','red');
}else{
inputnext()html('✔');
inputnext()css('color','green');
US=true;
}
});
}
});
//密码
$('input[name="password"]')blur(function(){
var v=$(this)val();
var reg=/^[a-zA-Z]{1}\w{5,15}$/;
if(!regtest(v)){
$(this)next()html('✘输入有误,请重新输入');
$(this)next()css('color','red');
}else{
$(this)next()html('✔');
$(this)next()css('color','green');
PS=true;
}
});
//重复密码
$('input[name="repassword"]')blur(function(){
var rv=$(this)val();
var v=$('input[name=password]')val();
if(rv !== v){
$(this)next()html('✘重复密码输入有误');
$(this)next()css('color','red');
}else{
$(this)next()html('✔');
$(this)next()css('color','green');
RPS=true;
}
});
//邮箱
$('input[name=email]')blur(function(){
var v=$(this)val();
var reg = /^\w+@\w+\(com|cn|com\cn|org|hk|edu|net)$/;
if(!regtest(v)){
$(this)next()html('✘输入有误,请重新输入');
$(this)next()css('color','red');
}else{
$(this)next()html('✔');
$(this)next()css('color','green');
EM=true;
}
});
//电话
$('input[name=phone]')blur(function(){
var v=$(this)val();
var reg=/^1\d{10}$/;
if(!regtest(v)){
$(this)next()html('✘输入有误,请重新输入');
$(this)next()css('color','red');
}else{
$(this)next()html('✔');
$(this)next()css('color','green');
PH=true;
}
});
//绑定表单提交事件
$('button[name=Submit]')click(function(){
//alert('dasd');
$("input")each(function(){
$(this)next()css('display','block'); //循环让每个input框后面的span显示出来
});
//触发丧失焦点事件
$('input[name=nickname]')trigger('blur');
$('input[name=username]')trigger('blur');
$('input[name=password]')trigger('blur');
$('input[name=repassword]')trigger('blur');
$('input[name=email]')trigger('blur');
$('input[name=phone]')trigger('blur');
if(NI && US && PS && RPS && EM && PH){
return true;
}
return false;
});
</script>
以上就是关于如何用jquery获取当前页面中input的个数全部的内容，包括:如何用jquery获取当前页面中input的个数、passwordStrength 基于jquery的密码强度检测代码使用介绍、jQuery方面，以下代码 点击可以显示密码，再点击无法隐藏密码，是为什么等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）