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

javascript form validation - value length and list of blocked words

本文关键字：单词 列表 验证 表单 JavaScript      更新时间：2023-09-26

好的，这个问题已经解决了!!谢谢大家，以下是最初的问题，所以你知道我想要实现什么，也许这会在将来对其他人有所帮助 ....基本上，当人们提交表单时，我希望脚本检查输入的值长度是否至少为某个数字。而且用户没有输入某个确切的单词。如果他们准确地输入了其中一个禁止的单词，或者如果他们输入的值没有足够的字符，那么我希望脚本失败，不发送输入值，而是通过将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:
<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;
}

谢谢！

试试这段代码

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

代码的问题出在行中

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 。看到这个SO问题。

相关文章：