如何使用javascript檢查文本框是否爲空

我有一個帶有一些TextBox的jsp頁面。現在我想填充一些信息並點擊提交按鈕。但我需要檢查這個TextBox是否爲空。如何使用javascript檢查文本框是否爲空

我該怎麼做？

2010-08-17 user222585

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

來源

2010-08-17 12:57:12 mplungjan

@Dreamonic我不明白爲什麼你會縮進我的代碼到目前爲止，它不能被閱讀沒有滾動。我按照自己喜歡的方式縮進它，以獲得最大的可見性並且仍然縮進。 – mplungjan 2013-06-05 16:40:46

無法抗拒，可以嗎？ :)好吧，既然我們現在要做到這一點，我會在這裏留下：http://meta.stackexchange.com/questions/183169 – 2013-06-05 16:55:01

沒問題。也許他會讀它 - 太糟糕了，花了我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>

來源

2010-08-17 13:56:40 Rubyist

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>

來源

2010-09-05 09:06:06

+1，它阻止了重定向到另一個頁面，並解決了我的問題..更多... – Lucky 2013-02-18 13:07:23

@dreamonic - 在這裏你需要它的縮進代碼，但在我看來並沒有足夠的。函數和if的內容左對齊 - 不需要在腳本標記下縮進代碼並浪費12個空格 – mplungjan 2013-06-06 07:52:09

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

來源

2012-10-16 10:37:39

無論您選擇什麼方法，都無法讓您在後端執行相同的驗證。

來源

2013-06-05 16:25:41 Alex

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

來源

2017-11-17 11:08:05

如何使用javascript檢查文本框是否爲空

回答

相關問題