首页 / 技术问答 / Javascript问答列表 / 问答详情

我不知道为什么我的JavaScript没有验证我的表单

对于"onsubmit"，我try 过"onClick"，但仍然不起作用.而且我的JavaScript应该没问题，但如果有任何一般错误，请告诉我.我的一个朋友告诉我，这与类型="submit"有关，但我不知道解决这个问题的方法.当我将"onClick"更改为"onsubmit"时，我将"onsubmit"移至顶部，而不是将提交按钮所在的位置.

function Signup() {
  vfname = document.forms["register_form"]['fname'].value;
  vlname = document.forms["register_form"]['lname'].value;
  vemail = document.forms["register_form"]['email'].value;
  vphone = document.forms["register_form"]['phone'].value;
  vpassw = document.forms["register_form"]['passw'].value;
  vpassc = document.forms["register_form"]['passc'].value;
}
if (Name(vfname, vlname)) {
  if (Email(vemail)) {
    if (Phone(vphone)) {
      if (Password(vpassw, vpassc)) {
        alert("Verify success");
        register_form.submit();
        return true;
      }
    }
  }
}

function Password(vpassw, vpassc) {
  var passwordmatch = /^[A-Za-z0-9\s]+$/;
  if (vpassw.match(passwordmatch) = vpassc.match(passwordmatch)) {
    if (vpassw.match(passwordmatch) == null) {
      alert("Must enter a password");
      return false;
    } else {
      alert("Passwords match");
      return true;
    }
  } else {
    alert("Password error");
    return false;
  }
}

function Phone(vphone) {
  var phoneformat = /^[0-9]+$/;
  if (vphone.match(phoneformat) == null) {
    alert("Numbers only");
    return false;
  } else {
    if (vphone.length != 10) {
      alert("Phone number is not the required length");
    } else {
      return true;
    }
  }
}

function Email(vemail) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (vemail.match(mailformat)) {
    return true;
  } else {
    alert("Email address does not follow the format");
    return false;
  }
}

function Name(vfname, vlname) {
  var nameformat = /^[a-zA-Z]+$/;
  if (vfname.match(nameformat) == null || vlname.match(nameformat) == null) {
    alert("First name and last name can only contain letters");
    return false;
  } else {
    return true;

  }

}
<script type="text/javascript" src="cue/js/veri.js"></script>

<form name="register_form" method="post" action="http://tlocalhost/ds/signup.php" onsubmit="return Signup();">
  <p class="info">First Name</p>
  <div class="form-group">
    <input id="fname" name="fname" placeholder="John" class="form-control" required>
  </div>
  <p class="info">Surname</p>
  <div class="form-group">
    <input id="lname" name="lname" placeholder="Smith" class="form-control" required>
  </div>
  <p class="info">Email</p>
  <div class="form-group">
    <input type="email" name="email" placeholder="js@gmail.com" class="form-control" required>
  </div>
  <p class="info">Phone Number</p>
  <div class="form-group">
    <input type="phone" name="phone" placeholder="0412456789" class="form-control" required>
  </div>
  <p class="info">Password</p>
  <div class="form-group">
    <input id="passw" name="passw" placeholder="$0aP2S" class="form-control" required>
  </div>
  <p class="info">Confirm Password</p>
  <div class="form-group">
    <input id="passc" name="passc" placeholder="$0aP2S" class="form-control" required>
  </div>
  <div class="form-btn">
    <input type="reset" class="btn-reset" value="RESET"></input>
    <input type="submit" value="SUBMIT" class="btn-submit"></input>
  </div>
  <div>
    <p class="link"><a href="http://localhost/ds/html-2column.php"> Got an account? Login here! </a></p>
  </div>
</form>

推荐答案

几个错误

  • 把}分放在错误的地方.我简化了测试
  • ===是比较，您的匹配密码中有=
  • 密码测试反正不正确，我简化了它们
  • 您不需要在提交事件中提交表格，但我使用了推荐的preventAlert，而不是返回true或False
  • 不对您的变量使用let或var将污染全局范围
  • 退货后无需使用其他
  • HTML 无效

我添加了一些ID并使用ID而不是名称.表单名称已被废弃.

我还创建了函数consts并使用推荐的eventListeners

最后，我将测试更改为测试不正确并停止提交，而不是测试正确并允许提交.

const isPassword = (vpassw, vpassc) => {
  var passwordmatch = /^[A-Za-z0-9\s]+$/;
  if (!vpassw.match(passwordmatch) || !vpassc.match(passwordmatch)) {
    alert("Password error");
    return false
  }
  if (vpassw !== vpassc) {
    alert("Passwords must match");
    return false;
  }
  return true;
};
const isPhone = (vphone) => {
  var phoneformat = /^[0-9]+$/;
  if (vphone.match(phoneformat) == null) {
    alert("Numbers only");
    return false;
  }
  if (vphone.length != 10) {
    alert("Phone number is not the required length");
    return false
  }
  return true;
};

const isEmail = (vemail) => {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (vemail.match(mailformat)) {
    return true;
  }
  alert("Email address does not follow the format");
  return false;
};

function isName(vfname, vlname) {
  var nameformat = /^[a-zA-Z]+$/;
  if (vfname.match(nameformat) == null || vlname.match(nameformat) == null) {
    alert("First name and last name can only contain letters");
    return false;
  }
  return true;
};


window.addEventListener('DOMContentLoaded', () => {
  document.getElementById('register_form').addEventListener('submit', (e) => {
    let vfname = document.getElementById('fname').value,
      vlname = document.getElementById('lname').value,
      vemail = document.getElementById('email').value,
      vphone = document.getElementById('phone').value,
      vpassw = document.getElementById('passw').value,
      vpassc = document.getElementById('passc').value;
    if (!isName(vfname, vlname) || !isEmail(vemail) || !isPhone(vphone) || !isPassword(vpassw, vpassc)) {
      e.preventDefault(); // stop submission
    }
  });
});
<script type="text/javascript" src="cue/js/veri.js"></script>

<form id="register_form" method="post" action="signup.php">
  <p class="info">First Name</p>
  <div class="form-group">
    <input id="fname" name="fname" placeholder="John" class="form-control" required />
  </div>
  <p class="info">Surname</p>
  <div class="form-group">
    <input id="lname" name="lname" placeholder="Smith" class="form-control" required />
  </div>
  <p class="info">Email</p>
  <div class="form-group">
    <input type="email" id="email" name="email" placeholder="js@gmail.com" class="form-control" required />
  </div>
  <p class="info">Phone Number</p>
  <div class="form-group">
    <input type="phone" id="phone" name="phone" placeholder="0412456789" class="form-control" required />
  </div>
  <p class="info">Password</p>
  <div class="form-group">
    <input id="passw" name="passw" placeholder="$0aP2S" class="form-control" required />
  </div>
  <p class="info">Confirm Password</p>
  <div class="form-group">
    <input id="passc" name="passc" placeholder="$0aP2S" class="form-control" required />
  </div>
  <div class="form-btn">
    <input type="reset" class="btn-reset" value="RESET" />
    <input type="submit" value="SUBMIT" class="btn-submit" />
  </div>
</form>

Javascript相关问答推荐

在shiny 模块中实现JavaScript

如何使用CSS和JavaScript创建粘性、凝聚力的形状到形状(容器)变形？

警告！合同执行期间遇到错误[执行已恢复](Base Layer 2)

Javascript，部分重排序数组

使用下表中所示的值初始化一个二维数组

如何在Angular中插入动态组件

MongoDB中的引用

Phaser 3 console. log()特定游戏角色的瓷砖属性

为什么Mutations 观察器用微任务队列而不是macrotask队列处理？

如何在输入元素中附加一个属性为checkbox？

使用GraphQL查询Uniswap的ETH价格

如何修复我的数据表，以使stateSave正常工作？

当用户点击保存按钮时，如何实现任务的更改？

如何在 Select 文本时停止Click事件？

获取'；无法解决导入和导入"；slick-carousel/slick/slick-theme.css"；'；错误

ngOnChanges仅在第二次调用时才触发

如何在尚未创建的鼠标悬停事件上访问和着色div？

设置复选框根据选中状态输入选中值

在对象的嵌套数组中添加两个属性

JSON Web令牌(JWT)错误：RSA密钥对的签名无效

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630