`

jquery中限制部分字段不能输入

 
阅读更多
  在一个比如表单验证的过程中,有时候,假如要用户一定要输入某个字段,否则不给输入
其他字段,即屏蔽其他字段的输入,这个时候依然可以用jquery可以做到,例子如下:

1 假如页面有三个字段,用户名和密码和密码确认三个字段:
 

  <form>
<div>
<span class="label">User Name </span>
<input type="text" class="username" name="username"/>
<span class="error"> User name cannot be blank</span>
</div>
<div>
<span class="label">Password </span>
<input type="password" class="password" name="password" />
<span class="error"> Password cannot be blank</span>
</div>
<div>
<span class="label">Confirm Password </span>
<input type="password" class="confpass" name="confpass" />
<span class="error"> Password and Confirm Password don't match</span>
</div>
</form>

2 jquery中的脚本设置
 
$(document).ready(function() {
$('.error').hide();
$('.username').blur(function(){
data=$('.username').val();
var len=data.length;
if(len<1)
{
$('.username').next().show();
$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
}
else
{
$('.username').next().hide();
$('.password').removeAttr('disabled');
$('.confpass').removeAttr('disabled');
}
});
$('.password').blur(function(){
data=$('.password').val();
var len=data.length;
if(len<1)
{
$('.password').next().show();
$('.confpass').attr('disabled',true);
}
else
{
$('.password').next().hide();
$('.confpass').removeAttr('disabled');
}
});
$('.confpass').blur(function(){
if($('.password').val() !=$('.confpass').val())
{
$('.confpass').next().show();
}
else
{
$('.confpass').next().hide();
}
});
});

   
原理其实很简单,比如这里,在每个文本框的onblur事件中进行判断,先看用户框
中的是否输入和长度是否匹配,如果不符合要求的话,则$('.username').next().show();
这句,其实是显示下一个元素(即出错信息提示,即<span class="error"> User name cannot be blank</span>
)
  并且同时$('.password').attr('disabled',true);
$('.confpass').attr('disabled',true);
   将其他字段的disabled属性设置为TRUE即可.
   当然,要是输入了的话,也要重新设置回来,道理就这么简单了
3
7
分享到:
评论
1 楼 xuedong 2011-08-14  
不错,转了

相关推荐

    jQuery实现限制文本框的输入长度

    在限制文本框输入长度的场景中,jQuery的作用是简化DOM操作和事件处理。 ### 知识点二:事件监听 在上述代码中,我们使用了jQuery的`.on()`方法来监听文本框的`keypress`、`paste`和`keyup`事件。 1. `keypress`...

    jquery插件,是文本框只能输入数字

    这个插件的标题"jquery插件,是文本框只能输入数字"表明我们正在讨论一个特定的jQuery扩展,它的功能是限制用户在文本框中只能输入数字。这种功能在各种场景下都很实用,例如在线表单、财务输入或任何需要精确数字...

    jQuery textarea文本框输入文字字数限制提示代码.zip

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和Ajax交互。本资源“jQuery textarea文本框输入文字字数...在处理大量用户输入的网站或应用中,这种字数限制提示是不可或缺的。

    jquery.maskedinput 自定义输入格式,金额,时间,秒,毫秒控件

    jQuery Masked Input插件是一个轻量级的JavaScript库,用于在HTML输入字段中添加掩码功能。通过使用预定义的掩码规则,它可以自动格式化用户输入,从而实现如电话号码、日期、货币等特定格式的数据输入。该插件的两...

    jQuery 文本框字符限制插件 Textarea

    在网页设计中,有时我们需要对用户的输入进行控制,例如限制评论长度、留言字数或者表单字段的最大字符数。jQuery的Textarea字符限制插件就是为此目的而设计的,它可以实时显示用户当前输入的字符数,并在达到预设...

    jQuery实现实时输入字数统计

    在网页设计中,实时输入字数统计是一项常用的功能,它能帮助用户监控并控制他们的输入内容,例如在评论框、表单字段等场景下。jQuery作为一个强大的JavaScript库,提供了丰富的功能来简化这样的任务。本教程将详细...

    Jquery数字输入插件,淘宝商品数量输入插件、

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题涉及的是一个基于jQuery的特定插件,即用于数字输入的插件,通常用于电商网站的商品数量选择,如淘宝上的...

    JQuery中dategrid编辑状态下的数据长度限制方法小结[整理].pdf

    在jQuery的DataGrid插件中,用户经常需要在编辑状态下处理数据,这涉及到对数据长度的控制,以确保数据能够符合数据库字段的长度限制。以下是几种实现数据长度限制的方法: 一、数值类型(int)的长度限制: 对于...

    限制输入 提示输入剩余数字

    6. **表单验证**:在Web应用中,表单验证是限制输入的重要场景,通过JavaScript或者相关库(如jQuery Validation)可以实现对用户输入的实时验证。 7. **用户体验**:好的输入限制不仅要确保数据准确,还要考虑到...

    inputLimit:一个jQuery插件,用于将文本字段的输入限制为数字,逗号和2个小数位

    一个jQuery插件,用于将文本字段的输入限制为数字,逗号和小数位 安装 在您的项目中包含文件inputLimit.js &lt; script src =" /js/inputLimit.js " &gt; &lt;/ script &gt; 用法 $ ( '.js-inputlimit' ) . ...

    jquery对textarea的长度进行验证

    它的属性如`rows`和`cols`分别定义了显示的行数和列数,而`maxlength`属性则可以限制用户输入的最大字符数,但这个属性并不检查文本的实际长度,只针对可见字符。 然而,`maxlength`属性无法满足某些场景下对文本...

    masked-input:一个jQuery插件,用于将用户在文本字段中的输入限制为特定的模式

    一个插件,用于限制文本字段的输入,并允许用户轻松地以指定的模式输入数据。 一些示例模式包括电话号码,日期,社会保险等。这是预定义掩码及其代表的集合: X-代表字母字符(AZ,az) 9-代表数字字符(0-9) ...

    JQuery UI1.7中文文档

    - **Datepicker(日期选择器)**: 为输入字段提供日历控件,支持多种日期格式和日期范围限制。 - **Autocomplete(自动完成)**: 在输入框中提供实时的搜索建议,提高用户输入效率。 - **Sortable(可排序)**: 使...

    jQuery编写textarea输入字数限制代码

    当我们需要用户输入不超过特定字数的文本时,字数限制功能就显得尤为重要。在实际开发中,这种需求通常出现在评论、搜索框或者其他需要限制字符数的场景中。 在上述代码示例中,首先通过判断浏览器类型来决定绑定的...

    jquery中注册,登录,完善个人资料等的验证demo

    - **长度验证**:限制某些字段的输入长度,如个人简介不超过一定字数。 - **选择项验证**:如性别、籍贯等,确保用户至少选中一个选项。 4. **jQuery实现方法**: - 使用`$.ajax()`函数进行异步请求,进行服务器...

    jquery.rangeinput:jQuery插件,用于为输入字段指定最小值和最大值,并在每个范围限制处启用按钮列表

    jquery.rangeinput jQuery插件,用于为输入字段指定最小值和最大值,并带有在每个范围限制处启用/禁用的按钮列表。属性属性“ data-min”和“ data-max”是必需的。 属性“ data-msg”是可选的,并且仅在传递了选项...

    JQuery UI 中文帮助文档

    - **Datepicker(日期选择器)**: 为输入字段添加了一个弹出的日历,方便用户选择日期,支持多种格式化选项和日期限制。 - **Tabs(选项卡)**: 将内容分隔成多个选项卡,每个选项卡内可包含不同的内容区域,便于...

    jquery中表示必须录入项

    6. **jQuery选择器**:虽然题目中没有明确提到jQuery,但文件部分内容可能是在jQuery环境中,因为出现了`$("gv_data")`这样的选择器,这通常是jQuery用来选取DOM元素的方式。 7. **数据绑定**:`InitCategory`函数...

Global site tag (gtag.js) - Google Analytics