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

  • 相关阅读:
    创新县(市、区)的主要条件
    C# imgage图片转base64字符/base64字符串转图片另存成
    base64编码的 文件 图片
    CSS
    Exception has been thrown by the target of an invocation 网站报错
    高效通用分页存储过程 多表查询
    JavaScript 知识记录
    JQuery 全选 取消
    ELK(elasticsearch+logstash+kibana)入门到熟练-从0开始搭建日志分析系统教程
    ELK- elasticsearch 讲解,安装,插件head,bigdesk ,kopf,cerebro(kopf升级版)安装
  • 原文地址:https://www.cnblogs.com/sky7034/p/2138692.html
Copyright © 2011-2022 走看看