使用纯HTML与JavaScript实现注册表单校验 阻止无效数据提交

问题原因 #

你的代码出现无效数据仍可提交的问题，核心有3个错误：

• onsubmit事件绑定位置错误：onsubmit是表单<form>标签的专属事件，你绑在了提交按钮上，触发逻辑不生效
• 校验函数没有返回值：即使校验失败，也没有返回false阻止表单的默认提交行为
• 代码本身存在笔误：比如校验课程名长度时错误调用姓名字段、国家字段ID大小写错误、提示文本错别字等

修复步骤 #

1. 修改JavaScript校验函数 #

在每一个校验失败的分支末尾加return false，校验全部通过的分支末尾加return true，同时修复原有笔误，修改后代码如下：

function formValidation() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var mobile = document.getElementById("mobile").value;
  var address = document.getElementById("address").value;
  var pincode = document.getElementById("pincode").value;
  var state = document.getElementById("state").value;
  var country = document.getElementById("country").value;
  var coursename = document.getElementById("coursename").value;
  var pattern1 = /^\d{6}$/;
  var pattern2 = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
  var letters = /^[A-Za-z]+$/;
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if (name == '') {
    alert('Please enter your name');
    return false;
  } else if (!letters.test(name)) {
    alert('Name field required only alphabet characters');
    return false;
  } else if (name.length < 6) {
    alert('Name minimum length is 6');
    return false;
  } else if (name.length > 33) {
    alert('Name maximum length is 33');
    return false;
  } else if (email == '') {
    alert('Please enter your user email id');
    return false;
  } else if (!filter.test(email)) {
    alert('Invalid email');
    return false;
  } else if (mobile == '') {
    alert('Please enter your mobile');
    return false;
  } else if (!pattern2.test(mobile)) {
    alert('Mobile Should be 10 digits');
    return false;
  } else if (address == '') {
    alert('Please enter your address');
    return false;
  } else if (address.length < 20) {
    alert('Address minimum length is 20');
    return false;
  } else if (address.length > 32) {
    alert('Address maximum length is 32');
    return false;
  } else if (pincode == '') {
    alert('Please enter your pincode');
    return false;
  } else if (!pattern1.test(pincode)) {
    alert('Pincode Should be 6 digits');
    return false;
  } else if (state == '') {
    alert('Please enter your state');
    return false;
  } else if (!letters.test(state)) {
    alert('State field required only alphabet characters');
    return false;
  } else if (state.length < 6) {
    alert('state minimum length is 6');
    return false;
  } else if (state.length > 33) {
    alert('state maximum length is 33');
    return false;
  } else if (country == '') {
    alert('Please enter your Country');
    return false;
  } else if (!letters.test(country)) {
    alert('Country field required only alphabet characters');
    return false;
  } else if (country.length < 6) {
    alert('Country Name minimum length is 6');
    return false;
  } else if (country.length > 33) {
    alert('Country Name maximum length is 33');
    return false;
  } else if (coursename == '') {
    alert('Please enter your course name');
    return false;
  } else if (!letters.test(coursename)) {
    alert('Course Name field required only alphabet characters');
    return false;
  } else if (coursename.length < 6) {
    alert('Course Name minimum length is 6');
    return false;
  } else if (coursename.length > 40) {
    alert('Course Name maximum length is 40');
    return false;
  } else {
    alert('Thank You for Registration');
    return true;
  }
}

2. 修改HTML代码 #

把onsubmit事件移到form标签上，同时加return关键字接收校验函数的返回值，修改后代码如下：

<h3>STUDENT REGISTRATION FORM</h3>
<form name="registration" onsubmit="return formValidation()">
  Applicant Name:<input type="text" name="name" id="name" placeholder="Enter your Full  Name"><br> 
  Email id:<input type="text" name="email" id="email" placeholder="Enter your email id"><br> 
  Mobile Number:<input type="text" name="mobile" id="mobile" placeholder="Enter your mobile number"><br>  
  Address:
  <textarea name="address" id="address" cols="35" rows="4"></textarea><br> 
  Pin Code<input type="text" name="pincode" id="pincode" placeholder="Enter the pincode"><br> 
  State:<br><input type="text" name="state" id="state" placeholder="Enter the state name"><br> 
  Country:<input type="text" name="country" id="country" placeholder="Enter the name of residing country"><br> 
  Course Name:<input type="text" name="coursename" id="coursename" placeholder="Enter the course name">
  <button type="submit">Submit</button>
</form>

CSS代码不需要修改，修改完成后只要校验不通过就会弹出对应提示，同时阻止表单提交，全部校验通过才会执行提交逻辑。

内容的提问来源于stack exchange，提问作者Preksha Sharma