• 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即可.
       当然,要是输入了的话,也要重新设置回来,道理就这么简单了

  • 相关阅读:
    css实现一行居中显示,两行靠左显示
    杂记
    去除inline-block元素间间距的N种方法
    ps快捷键
    python3使用ltp语言云
    WEKA “Detailed Accuracy By Class”和“Confusion Matrix”含义
    分类问题的精确率和召回率 (准确率)
    修改文件所属组和用户
    linux添加新用户
    linux新建用户tab无法补全命令
  • 原文地址:https://www.cnblogs.com/sky7034/p/2138692.html
Copyright © 2020-2023  润新知