javascript - HTML - 如何在 JavaScript 中对 textarea 的空值输入进行错误检查？

Question

我想在脚本中对文本区域的输入进行一些错误检查，即如果没有输入，则显示警报。我尝试使用 value="" value='' ，但似乎都无法正常工作。

场地

 <div class="field">
        <label>remarks:</label>
        <textarea id="id_remarks" name="remarks"></textarea>
 </div>

保存按钮

<input type="submit" value="Save" onclick="verify()"/>

功能

<script>    
    function verify(){
    if (document.forms[0].elements['id_remarks'].value=='') {
        alert('Please enter the remarks')
    }
</script>

任何人都可以帮助如何做到这一点？非常感谢

Answer 1

试试看

function verify(){
    if(!document.getElementById('id_remarks').value.trim().length){
        alert("Please enter the remarks");
    }
 }

更新：已修复 IE 版本 < 9

IE 9 以下版本不支持 .trim()

if(typeof String.prototype.trim !== 'function'){
    String.prototype.trim = function() {
        return this.replace(/^\s+|\s+$/g, ''); 
    }
}

Answer 2

var x=document.forms[0].elements['id_remarks'].value;

if(!x){} else {}

这将检查(""), null, undefined,false和数字0和NaN

资源 ：

如何在 JavaScript 中检查 null 值？

Answer 3

.value将textarea对象的 与空字符串进行比较可以正常工作（请参阅此 jsFiddle）。

我唯一能看到你的代码奇怪的是.elements表单对象的属性的使用。我不能说那是错误的，只是这不是我习惯看到它完成的方式。我习惯于使用document.getElementById().

无论如何，以下工作......

HTML：

<form id="f1" action="" method="post">
    <label for="ta1">TextArea</label>
    <br/>
    <textarea id="ta1"></textarea>
    <label for="result">Result:</label>
    <input id="result" type="text"></input>
    <br/>
    <input type="submit" value="verify"></input>
</form>

JavaScript：

var ta1 = document.getElementById("ta1");
var result = document.getElementById("result");
f1.onsubmit = function () {
    if (ta1.value === "") {
        result.style.color = "red";
        result.value = "Blank";
    } else {
        result.style.color = "blue";
        result.value = "Not Blank: '" + ta1.value + "'";
    }
    return false;
};

Answer 4

这对我有用

演示

if (!document.getElementById('id_remarks').value.trim()) {
        alert('Please enter the remarks');
    }

trim()验证空格。

Answer 5

验证更常应用于表单的提交处理程序，因为无需单击提交按钮即可提交表单。

将控件的值与“”（空字符串）进行比较应该可以工作，但是该值可能是空格，因此您可能需要先将其删除，例如

<form onsubmit= "return verify(this);" ...>
  <textarea id="id_remarks" name="remarks"></textarea>
  <input type="submit">
</form>

<script>
function verify(form) {
  if (form.remarks.value.replace(/\s+/g,'') == '') {
    alert('Please enter some remarks');
    return false;
  }
}
</script>

Answer 6

尝试检查长度属性

if (!document.forms[0].elements['id_remarks'].value.length) {

Answer 7

小提琴工作http://jsfiddle.net/Q4JPs/8/

HTML

<div class="field">
        <label>remarks:</label>
        <textarea id="id_remarks" name="remarks"></textarea>
 </div>
<button id='btn'>Click me</button> 

js

document.getElementById('btn').onclick = function (){
    if (document.getElementById('id_remarks').value =="")
    {
        alert("is Empty");
        return;
    }


 }

Answer 8

您可以required在 HTML5 中使用该属性，它适用于所有现代浏览器，即使用户禁用了 javascript。例子：

<form action="" method="post">
    <input name="username" value="" title="username" required>
    <input type="submit">
</form>