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

  • 相关阅读:
    java操作docker示例(docker-java)
    istio实现对外暴露服务
    istio实现自动sidecar自动注入(k8s1.13.3+istio1.1.1)
    k8s1.13.3安装istio(helm方式)
    wrk http压测工具介绍
    etcd 相关介绍
    openresty 常用API学习
    Lua 相关知识点
    Lua 获取table的长度
    Lua 字符串相关操作
  • 原文地址:https://www.cnblogs.com/sky7034/p/2138692.html
Copyright © 2011-2022 走看看