JavaScript中的添加和删除属性

739

我的问题是,当我单击提交时,它应该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>

纳迪尔·拉斯卡(Nadir Laskar)

您的其他条件中有错误

您可以通过这种方式验证您的表单。

   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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在javascript中从主体添加和删除div

来自分类Dev

JavaScript:从数组中添加和删除对象

来自分类Dev

在JavaScript中添加和删除类

来自分类Dev

在JavaScript中添加和删除表单

来自分类Dev

使用属性添加和删除列表中的元素

来自分类Dev

删除Javascript中的属性

来自分类Dev

在 javascript 中从 dataTables 源数组中添加和删除项目

来自分类Dev

如何在javascript中添加和删除对象?

来自分类Dev

如何在JavaScript中添加和删除图像上的边框

来自分类Dev

递归地从javascript对象中添加和删除值

来自分类Dev

jQuery的添加和删除禁用属性

来自分类Dev

使用jQuery删除和添加属性ID

来自分类Dev

使用jQuery添加和删除属性

来自分类Dev

添加和删除锚点属性

来自分类Dev

在DOM中删除和添加

来自分类Dev

如何使用jQuery onchange事件在HTML中添加和删除属性?

来自分类Dev

在 node.js 中为 html 字符串删除和添加属性

来自分类Dev

在 JavaScript 中创建的元素添加了 .type 和 .disabled 属性,但不添加 .form 或 .value

来自分类Dev

如何在JavaScript中在运行时中向对象添加/删除属性

来自分类Dev

删除数组中的重复对象,但在javascript中继续添加一些属性

来自分类Dev

从JavaScript数组添加和删除值

来自分类Dev

动态添加和删除JQuery / JavaScript

来自分类Dev

为对象javascript添加和删除值

来自分类Dev

Javascript:向dom添加和删除元素

来自分类Dev

javascript从特定索引中的列表中添加和删除多个值

来自分类Dev

javascript从特定索引中的列表中添加和删除多个值

来自分类Dev

在Scala中添加和删除回调

来自分类Dev

在函数调用中添加和删除标签

来自分类Dev

在jQuery中添加和删除类

Related 相关文章

热门标签

归档