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

问题描述:

我有一个带有一些TextBox的jsp页面。现在我想填充一些信息并点击提交按钮。但我需要检查这个TextBox是否为空。如何使用javascript检查文本框是否为空

我该怎么做?

+0

@mplungjan:这个数据被缓存了,有点耐心。它会在大约15分钟后赶上。 – BalusC 2010-08-17 13:05:49

规范,而不使用与加装饰的原型框架,旧的浏览器

<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 
} 

传递形式对象(本)

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

@Dreamonic我不明白为什么你会缩进我的代码到目前为止,它不能被阅读没有滚动。我按照自己喜欢的方式缩进它,以获得最大的可见性并且仍然缩进。 – mplungjan 2013-06-05 16:40:46

+1

无法抗拒,可以吗? :)好吧,既然我们现在要做到这一点,我会在这里留下:http://meta.stackexchange.com/questions/183169 – 2013-06-05 16:55:01

+0

没问题。也许他会读它 - 太糟糕了,花了我10元代表 – mplungjan 2013-06-05 16:58:47

使用这个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> 
+0

1)并非所有的浏览器都能理解text_form - 你应该使用document.text_form 2)将表单传递给函数更加安全和简单 3)“DUDE”是什么?可能是DUDETTE – mplungjan 2010-08-18 06:12:12

使用正则表达式:\ 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> 
+0

+1,它阻止了重定向到另一个页面,并解决了我的问题..更多... – Lucky 2013-02-18 13:07:23

+0

@dreamonic - 在这里你需要它的缩进代码,但在我看来并没有足够的。函数和if的内容左对齐 - 不需要在脚本标记下缩进代码并浪费12个空格 – mplungjan 2013-06-06 07:52:09

+0

@mplungjan这是一个意见问题。我应该缩进JavaScript函数 - 就像我已经提交的最后一次编辑一样。 – 2013-06-06 08:22:18

您也可以在使用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> 

无论您选择什么方法,都无法让您在后端执行相同的验证。

<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文件。