当前位置: 代码迷 >> Ajax >> jquery 判断input框解决办法
  详细解决方案

jquery 判断input框解决办法

热度:541   发布时间:2012-04-24 14:15:38.0
jquery 判断input框
1,判断input 框 只能输入数字
2,判断 input 的框不能为空,并且 输入的数字不能大于5
3,界面有两个单选框,点击男就把input 的框显示出来,点击女就把input的框隐藏掉。


大虾们 帮帮忙! 本人在线等。

------解决方案--------------------
问题很简单啊。。自己动手写吧。。
------解决方案--------------------
楼主自己先尝试写,不会的地方再贴上来。

------解决方案--------------------
提交时检查一下input是否隐藏,隐藏了就不需要判断呗。
HTML code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function show(){
    if($("#inputs").css('display')!='none')
    {
        $("#inputs").css('display','none');
    }
    else
    {
        $("#inputs").css('display','block');
    }
}
</script>
</head>
<body>
    <div><input type="text" id="inputs" value="AAA" /></div>
    <div><input type="button" value="显示或隐藏input框" onclick="show()" /></div>    
</body>
</html>

------解决方案--------------------
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
  $(function () {

      $("input[type=radio]").click(function () {
          var a = $(this).next("span").text();
          alert(a);
          if (a == "显示") {
            $('#abc').css('display', 'block');
          }
          else {
            $('#abc').css('display', 'none');
          }
        });
          $('#sub').click(function () {
              var nannv = $('input[type=radio]:checked').val();
              alert(nannv);
              if(nannv==0){
                var pattern = /^[1-5]$/;
                var v = $("#abc").val();
                if (v != '') {
                if (!pattern.test(v)) {
                  alert('只能输入数字且不能大于5小于0');
                  $("#abc").val("");
                  $('#abc').focus();
                  return false;
                }
                else { return true; }
                }
                else {
                  alert('不能为空');
                  $('#abc').focus();
                  return false;  
                }
              }else{
                alert('不显示输入框了');
                return false;
              }
             
        });
  })
  </script>
</head>
<body>
  <form action="#" method="post">
  <input name="nannv" type="radio" value="0"/><span>显示</span>
  <input name="nannv" type="radio" value="1"/><span>隐藏</span>
  <input type="text" name="abc" id="abc" />
  <input type="submit" value="提交" id='sub' />
  </form>
</body>
</html> 
  相关解决方案