如何使用JavaScript检查文本框是否为空

Question

如何使用JavaScript检查文本框是否为空

javascript

7

我有一个包含一些文本框的JSP页面。现在我想要填充它们并点击提交按钮。但是我需要检查这个文本框是否为空。

我该如何做呢？

- user222585

@mplungjan：这些数据已经被缓存，请耐心等待。大约15分钟后就会更新。 - BalusC

7个回答

7

使用添加了修剪原型的旧版浏览器的规范，而不使用框架

<html>
<head>
<script type="text/javascript">
// add trim to older IEs
if (!String.trim) {
  String.prototype.trim = function() {return this.replace(/^\s+|\s+$/g, "");};
}

window.onload=function() { // onobtrusively adding the submit handler
  document.getElementById("form1").onsubmit=function() { // needs an ID
    var val = this.textField1.value; // 'this' is the form 
    if (val==null || val.trim()=="") { 
      alert('Please enter something');
      this.textField1.focus();
      return false; // cancel submission
    }
    return true; // allow submit
  }
}
</script>
</head>
<body>
<form id="form1">
  <input type="text" name="textField1" value="" /><br/>
  <input type="submit" />
</form>
</body>
</html>

以下是内联版本，虽然不建议使用，但在您需要添加验证而无法重构代码时，我在这里展示它。

function validate(theForm) { // passing the form object
  var val = theForm.textField1.value;
  if (val==null || val.trim()=="") { 
    alert('Please enter something');
    theForm.textField1.focus();
    return false; // cancel submission
  }
  return true; // allow submit
}

将表单对象传递给 (this)

<form onsubmit="return validate(this)">
  <input type="text" name="textField1" value="" /><br/>
  <input type="submit" />
</form>

- mplungjan

1

@Dreamonic 我看不出来你为什么要缩进我的代码，以至于不滚动就无法阅读。我缩进代码的方式是我喜欢的方式，为了最大化可见性仍然进行了缩进。 - mplungjan

1

你还是忍不住了，是吧？ :) 既然我们现在要这样做，我就把这个链接留在这里：http://meta.stackexchange.com/questions/183169 - Robert Harvey

实际上，你无法阅读的代码只是一段粘贴的修饰代码。window.onload 代码和右侧的注释是我感到烦恼的部分 - 请不要动我的代码，如果必须的话，请缩进需要缩进的代码。 - mplungjan

如果您正确缩进代码，我就不会编辑它。现在，所有主要标签（如html、head、script和body）都在一行上。您还可以忽略这些标签，只需将代码分成两个块：一个包含JavaScript，另一个包含HTML。无论如何，如果这样做让您感到困扰，我将不再编辑您的帖子。 - Pieter VDE

正如我所说 - 我们对“正确”的看法不同。我强烈建议您仅在没有缩进时才进行“修复”。当用户是新手时，我已经将HTML放在那里以显示脚本的位置。谢谢。 - mplungjan

显示剩余2条评论

5

使用这个JavaScript会对你有很大的帮助。代码中已经给出了一些解释。

<script type="text/javascript">
    <!-- 
        function Blank_TextField_Validator()
        {
        // Check whether the value of the element 
        // text_name from the form named text_form is null
        if (!text_form.text_name.value)
        {
          // If it is display and alert box
           alert("Please fill in the text field.");
          // Place the cursor on the field for revision
           text_form.text_name.focus();
          // return false to stop further processing
           return (false);
        }
        // If text_name is not null continue processing
        return (true);
        }
        -->
</script>
<form name="text_form" method="get" action="#" 
    onsubmit="return Blank_TextField_Validator()">
    <input type="text" name="text_name" >
    <input type="submit" value="Submit">
</form>

- Rubyist

不是所有的浏览器都能理解 text_form - 你应该使用 document.text_form。
把表单传递给函数更安全、更简单。
“DUDE” 是怎么回事？可能是个女生。

- mplungjan

2

你可以使用jQuery来检查它。这非常简单：

<html>
    <head>
        <title>jQuery: Check if Textbox is empty</title>
        <script type="text/javascript" src="js/jquery_1.7.1_min.js"></script>
    </head>
    <body>
        <form name="form1" method="post" action="">
            <label for="city">City:</label>
            <input type="text" name="city" id="city">
        </form>
        <button id="check">Check</button>
        <script type="text/javascript">
             $('#check').click(function () {
                 if ($('#city').val() == '') {
                     alert('Empty!!!');
                 } else {
                     alert('Contains: ' + $('#city').val());
                 }
             });                
        </script>
    </body>
</html>

- Muhammad Azeem

0

无论您选择哪种方法，都不能使您免于在后端执行相同的验证。

- Alex

0

最简单的方法是不使用javascript，而是使用required=""

<input type="text" ID="txtName"  Width="165px" required=""/>

- PRATEEK GHOSH

-1

<pre><form name="myform"  method="post" enctype="multipart/form-data">
    <input type="text"   id="name"   name="name" /> 
<input type="submit"/>
</form></pre>

<script language="JavaScript" type="text/javascript">
 var frmvalidator  = new Validator("myform");
    frmvalidator.EnableFocusOnError(false); 
    frmvalidator.EnableMsgsTogether(); 
    frmvalidator.addValidation("name","req","Plese Enter Name"); 

</script>

注意：在使用上述代码之前，您必须添加gen_validatorv31.js文件。

- Ravindra Bohra

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sweets-BlingBling · Accepted Answer

使用正则表达式：\S将匹配非空格字符：除了空格、制表符或换行符之外的任何内容。如果您的字符串只有一个非空格、制表符或换行符的字符，那么它就不是空的。因此，您只需要搜索一个字符：\S

JavaScript：

function checkvalue() { 
    var mystring = document.getElementById('myString').value; 
    if(!mystring.match(/\S/)) {
        alert ('Empty value is not allowed');
        return false;
    } else {
        alert("correct input");
        return true;
    }
}

HTML：

<form onsubmit="return checkvalue(this)">
    <input name="myString" type="text" value='' id="myString">
    <input type="submit" value="check value" />
</form>