如果父母输入错误，我该如何更改表单的班级

Question

我目前正在使用A，以便在我的网站上添加搜索功能。我希望他们输入以765611开头的数字，然后有11个数字。如果他们输入正确的数字，它将运行以下脚本：

    var a = document.getElementById('search');
a.addEventListener('submit',function(e) {
    e.preventDefault();
    var b = document.getElementById('searchbar').value;
    window.location.href = 'thecopperkings.co.uk'+b;
});

如果他们输入错误的数字（即，一个不以765611 和的数字开头的数字，有11个数字正在进行它），DIV的背景将闪烁红色两秒钟（我假设这是这样的方式可以通过添加带有红色背景的临时类值也具有过渡，并且上述代码不会运行。

我对JS非常糟糕（和新），但要看其他人的代码和我的基本知识，我认为这必须是这样的东西：

var search = document.getElementByID('search');
a.addEventListener('submit',function(e) {
if document.getElementByID('searchbar').value = "765611[0-9]{11}$" {
    e.preventDefault();
    var b = document.getElementById('searchbar').value;
    window.location.href = 'thecopperkings.co.uk'+b;
}
else {
**SET THE FORM'S CLASS TO "RED"?**
}

这样做的最好，最有效的方法是什么？

    var a = document.getElementById('search');
    a.addEventListener('submit',function(e) {
        e.preventDefault();
        var b = document.getElementById('searchbar').value;
        window.location.href = 'thecopperkings.co.uk'+b;
    });

        <div>
            <form class="search" id="search" method="get" action="html/player.html">
                <input type="text" placeholder="What is your SteamID?" id="searchbar" name="id" maxlength="17">
                <input type="submit" value="Search">
            </form>
        </div>

Answer 1

请找到以下答案。

可以在此处找到工作示例jsfiddle

将红色类添加为 .red { background-color:red !important;}

   
    var a = document.getElementById('search');
function appendClass(elementId, classToAppend){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToAppend) == -1)
    {
      document.getElementById(elementId).setAttribute("class", oldClass+ " "+classToAppend);
    }
}
function removeClass(elementId, classToRemove){
    var oldClass = document.getElementById(elementId).getAttribute("class");
    if (oldClass.indexOf(classToRemove) !== -1)
    {    			document.getElementById(elementId).setAttribute("class",oldClass.replace(classToRemove,''));
    }
}
    a.addEventListener('submit',function(e) {
        e.preventDefault();
        var b = document.getElementById('searchbar').value;
        //regular expression to match your criteria and test the sample value
				if(/^765611[0-9]{11}$/.test(b)) {
        		alert('success -> '+ b );
					window.location.href = 'thecopperkings.co.uk'+b;
				} else {
         //append the class red for searchid which is in form element
        	appendClass('search','red');
          //remove the red class after 2sec(2000milliseconds)
        	window.setTimeout(function(){removeClass('search','red');},2000);
        }
    });

        <div>
            <form class="search" id="search" method="get" action="html/player.html">
                <input type="text" placeholder="What is your SteamID?" id="searchbar" name="id" maxlength="17">
                <input type="submit" value="Search">
            </form>
        </div>

Answer 2

var patt = new RegExp("765611[0-9]{11}$");
var searchbar  = document.getElementByID('searchbar');
var searchForm = document.getElementByID('search');
if( patt.test(searchbar.value) ){
    searchForm.classlist.remove('error');
    // do your magic
} else{
    searchForm.classlist.add('error');
    // And maybe an alert or notice for the user
}

另外，请查看HTML5输入属性pattern=""