HTML-如何在javascript中对文本区域的空值输入进行错误检查

HTML -How to do error checking for null value input of textarea in javascript?

本文关键字：输入 空值 检查 错误 区域 文本 javascript HTML-      更新时间：2023-09-26

我想在脚本中对文本区域的输入进行一些错误检查，即如果没有输入，则显示警报。我尝试过使用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>

有人能帮我怎么做吗？非常感谢

试用

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

更新：已修复IE版本<9

在版本9以下的IE中，它不支持.trim((

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

var x=document.forms[0].elements['id_remarks'].value;
if(!x){} else {}

这将检查("")、null、undefined、false以及编号0和NaN

来源：

如何在JavaScript中检查空值？

验证通常应用于表单的提交处理程序，因为表单可以在不单击提交按钮的情况下提交。

将控件的值与"(空字符串(进行比较应该可以，但是该值可能是空白，因此您可能需要先删除它，例如

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

这对我有效

演示

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

trim()验证空格。

将textarea对象的.value与空字符串进行比较效果良好(请参阅此jsFiddle(。

我唯一能看到的关于代码的奇怪之处是表单对象的.elements属性的使用。我不能说这是错误的，只是我不习惯这样做。我习惯于使用document.getElementById()来识别DOM对象。

在任何情况下，以下工作。。。

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

尝试检查长度属性

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

Fiddle工作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;
    }

 }

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

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

相关文章：