[英]Add and Remove attribute in javascript
我的問題是，當我單擊提交時，它應該只為空字段添加box類。 但是我的代碼為填充和未填充字段都添加了box類。
function validate() { var a = document.forms["Form"]["uname"].value; var b = document.forms["Form"]["number"].value; var c = document.forms["Form"]["mail"].value; if (a == null || a == "", b == null || b == "", c == null || c == "") { ['uname', 'mobNo', 'mail'].forEach(function(ids) { document.getElementById(ids).style.border = "1px solid red"; }); return false; } else if (!a.match(/^([a-zA-Z]{2,30})$/)) { document.getElementById('uname').className = 'box'; return false; } else if (!b.match(/^\\d*[0-9](|.\\d*[0-9]|,\\d*[0-9])?$/)) { document.getElementById('mobNo').className = 'box'; return false; } else if (!c.match(/^([\\w-\\.]+@([\\w-]+)+(\\.[\\w-]{2,4})?)$/)) { document.getElementById('mail').className = 'box'; return false; } }
.box { border: 2px solid red; }
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <form method="post" name="Form" onsubmit="return validate()" action="" id="form_id"> <fieldset> <label>NAME:</label> <input type="text" name="uname" id="uname" class="fields"> <label>MOBILE NUMBER:</label> <input type="text" name="number" id="mobNo" class="fields" minlength="10" maxlength="10"> <label>EMAIL:</label> <input type="email" name="mail" id="mail" class="fields"> <button type="submit" name="submit">SUBMIT</button> </fieldset> </form> </body> </html>
在：
if (a==null || a=="",b==null || b=="",c==null || c=="")
,操作員什么也不做； 它返回最后的比較：
(c==null || c=="")
請修復為
if ((a==null || a=="") && (b==null || b=="") && (c==null || c==""))
您的其他條件中有錯誤
您可以通過這種方式驗證表單。
function validate() {
var a = document.forms["Form"]["uname"].value;
var b = document.forms["Form"]["number"].value;
var c = document.forms["Form"]["mail"].value;
var validation=true;
if ((a == null || a == "")||(!a.match(/^([a-zA-Z]{2,30})$/))) {
document.getElementById('uname').className = 'box';
validation=false;
} else{
document.getElementById('uname').className = '';
}
if ((b == null || b == "")||(!b.match(/^\d*[0-9](|.\d*[0-9]|,\d*[0-9])?$/))) {
document.getElementById('mobNo').className = 'box';
validation=false;
} else{
document.getElementById('mobNo').className = '';
}
if ((c == null || c == "")||(!c.match(/^([\w-\.]+@([\w-]+)+(\.[\w-]{2,4})?)$/))) {
document.getElementById('mail').className = 'box';
validation=false;
}else{
document.getElementById('mobNo').className = '';
}
return validation;
}
這是一個有效的Codepen鏈接， http： //codepen.io/nadirlaskar/pen/rjOEJQ
如何在JavaScript中按類獲取元素並添加/刪除屬性？
[英]How to Get Element By Class and add/remove attribute in JavaScript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.