Question

好的，这个问题已经解决了！谢谢你们，以下是原始问题，所以你知道我想要实现的目标，也许这将有助于将来的其他人 ....基本上当人们提交表单时，我希望脚本检查输入的值长度是否至少为一定数量。而且用户没有输入某个确切的单词。如果他们确切地输入了一个禁止的单词，或者他们输入的字符值不够，那么我希望脚本失败，不发送输入值，而是通过更改div的CSS显示来显示错误消息阻止。

这是更新的工作Javascript！

JAVASCRIPT:
function wordcheck() {
var words = ['words','Words']; 
if(document.getElementById('top').value.length < 5){
var error = document.getElementById('error');
error.style.display = 'block';
        return false;
    }
if(document.getElementById('bottom').value.length < 5){
var error = document.getElementById('error');
error.style.display = 'block';
        return false;
    }
for(var i = 0;i < words.length;i++){
    if(document.getElementById('top').value == words[i]){
var error = document.getElementById('error');
error.style.display = 'block';
        return false;
    }
}
    for(var i = 0;i < words.length;i++){
    if(document.getElementById('bottom').value == words[i]){
var error = document.getElementById('error');
error.style.display = 'block';
        return false;
    }
}
    return true;
}

以及参考的HTML

HTML:
<form method="get" action="test.html" id="formdate" class="formdate" onsubmit="return wordcheck()">

<input name="top" type="text" id="top" placeholder="top">

<input name="bottom" type="text" id="bottom" placeholder="bottom">

<button id="button" type="submit">Enter</button>

<div id="error" >
sorry try again
</div>


CSS:
#error {
color:red;
display: none;
margin-bottom: 10px;
text-align: center;
}

谢谢！

Answer 1

试试此代码

function check() {
var banned = ['january','January','11:03pm','11:03PM']; 
if(document.getElementById('date').value.length < 8){
   var error = document.getElementById('error');
   error.style.display = 'block';
            return false;
        }
if(document.getElementById('time').value.length < 8){
  var error = document.getElementById('error');
  error.style.display = 'block';
            return false;
        }
        return true;
}

Answer 2

您的代码存在问题

document.getElementById('error').css('display','block');

应该是

document.getElementById('error').style.display = 'block';

document.getElementById返回表示元素的Element对象。 .css(key,val)语法用于jQuery返回的对象;在这种情况下，由于您没有使用jQuery访问该元素，因此需要修改style.display属性。见HTMLElement.style

要检查字符串数组中是否包含字符串，请尝试banned.indexOf(str) != -1。请参阅this SO question。

javascript表单验证 - 值长度和被阻止的单词列表

2 个答案: