Javascript代码无法在我的表单上运行

时间:2017-02-24 13:25:17

标签: javascript html forms

我正在处理表单,但每当我按提交时我的表单都不起作用。我试图评估表单的部分是否为空,电子邮件和用户ID的位数。当我按提交时没有任何事情发生,我已经被困这样一段时间了。仅供参考我必须使用普通的js和html。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Student Login Form</title>
  <link rel='stylesheet' href='studentform.css' type='text/css' />
  <script src="studentform.js"></script>
</head>
<body onload="document.form.studentid.focus();">
  <h1>Student Login</h1>
  <div class="container">
      <form name="form" onsubmit="return validate();">
      <label for="studentid">Student ID:</label>
      <input type="number" name="studentid" maxlength="8" id="studentid" required />

      <label for="name">Name:</label>
      <input type="text" name="name" size="50"  id="name" required />

      <label for="email">Email:</label>
      <input type="email" name="email" size="50" id="email" required />

      <label for="emailconfirm">Email Confirmation:</label>
      <input type="checkbox" name="emailconfirm" checked /><span>Send an email confirmation</span>

      <select>
      <option selected>Student Registration</option>
      <option>Transcript</option>
      </select>

      <input type="submit" name="submit" value="Submit" />
  </form>
</div>

`

的js。

function validate(){
     var studentid = document.getElementById("studentid").value;
     var name = document.getElementById("name").value;
     var email = document.getElementById("email").value;
    if(nameEmpty(name))
    {
    if(studentidEmpty(studentid))
    {
    if(emailEmpty(email))
    {
    if(digitCheck(studentid))
    {
    if checkEmail(email)
    {
    verify(name, studentid)
    }
    }
    }
    }
    }
    return false;
    }

function studentidEmpty(studentid){
  if ( studentid == "" ){
    alert("Please provide your student id!");
    studentid.focus();
    return false;
  }
}

function nameEmpty(name){
if ( name == "" ){
    alert("Please provide your name!");
    name.focus() ;
    return false;
 }
}

function emailEmpty(email){
 if( email == "" ){
    alert( "Please provide your email!" );
    email.focus();
    return false;
 }

function digitCheck(studentid){
  var ok = studentid.search(".{8,}");
  if (ok!=0){
    alert("Please provide ID with 8 digits.");
    return false;
  }
}

function checkEmail(email) {
    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email.value)) {
      alert('Please provide a valid email address');
      email.focus;
      return false;
 }
}

function verify(name, studentid){
  var personList = [["Joe",11111111],["Tammy",22222222],["Jones",33333333]];
  for (list in personList) {
    if (name in list && studentid in list){
      alert("Welcome! An email verification with be sent soon.");
      return true;
    } else{
      alert("Student Name and/or ID not found in records");
      return false;
  }
}
}
}

3 个答案:

答案 0 :(得分:1)

我认为你应该解决这个问题:

Grid

if checkEmail(email)

你忘记了括号。

修改

我已经完全修复了你的代码。你的错误:

  • 您忘记为您的字段检查器添加其他子句,如果验证失败则只返回false
  • 检查“如果数组包含值”是错误的,我添加了here
  • 中的方法
  • 你试图关注价值观,而不是标签
  • 你试图从“价值”而不是“价值”
  • 来测试电子邮件价值

if (checkEmail(email))
function validate() {
	var studentid = document.getElementById("studentid").value;
	var name = document.getElementById("name").value;
	var email = document.getElementById("email").value;
	if (nameEmpty(name)) {
		if (studentidEmpty(studentid)) {
			if (emailEmpty(email)) {
				if (digitCheck(studentid)) {
					if (checkEmail(email)) {
						return verify(name, studentid);
					}
				}
			}
		}
	}
	return false;
}

function studentidEmpty(studentid) {
	if (studentid == "") {
		alert("Please provide your student id!");
		document.getElementById("studentid").focus();
		return false;
	} else {
    return true;
  }
}

function nameEmpty(name) {
	if (name == "") {
		alert("Please provide your name!");
		document.getElementById("name").focus();
		return false;
	} else {
    return true;
  }
}

function emailEmpty(email) {
	if (email == "") {
		alert("Please provide your email!");
		document.getElementById("email").focus();
		return false;
	} else {
    return true;
  }
}

	function digitCheck(studentid) {
		var ok = studentid.search(".{8,}");
		if (ok != 0) {
			alert("Please provide ID with 8 digits.");
			return false;
		} else {
      return true;
    }
	}

	function checkEmail(email) {
		var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		if (!filter.test(email)) {
			alert('Please provide a valid email address');
			email.focus;
			return false;
		} else {
      return true;
    }
	}

	function verify(name, studentid) {
		var personList = [
			["Joe", 11111111],
			["Tammy", 22222222],
			["Jones", 33333333]
		];
		for (list in personList) {
			if (contains.call(list, name) && contains.call(list, studentid)) {
				alert("Welcome! An email verification with be sent soon.");
				return true;
			}
		}
    alert("Student Name and/or ID not found in records");
		return false;
	}
  
  var contains = function(needle) {
    // Per spec, the way to identify NaN is that it is not equal to itself
    var findNaN = needle !== needle;
    var indexOf;

    if(!findNaN && typeof Array.prototype.indexOf === 'function') {
        indexOf = Array.prototype.indexOf;
    } else {
        indexOf = function(needle) {
            var i = -1, index = -1;

            for(i = 0; i < this.length; i++) {
                var item = this[i];

                if((findNaN && item !== item) || item === needle) {
                    index = i;
                    break;
                }
            }

            return index;
        };
    }

    return indexOf.call(this, needle) > -1;
};

答案 1 :(得分:0)

验证功能总是返回false !!它不应该。

function validate(){
    var studentid = document.getElementById("studentid").value;
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    return nameEmpty(name) && studentidEmpty(studentid) && emailEmpty(email) && digitCheck(studentid) && checkEmail(email) && verify(name, studentid);
}

然后确保您的表单如下:

<form name="form" onsubmit="return validate();" action="javascript:void(0)">
</form>

您的自动对焦输入看起来像:

<input type="number" name="studentid" maxlength="8" id="studentid" required autofocus/>

答案 2 :(得分:0)

你忘记了括号。 启动和结束每个功能也是错误的,尝试使用下面的代码进行这些修正。

function validate() {
  var studentid = document.getElementById("studentid").value;
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  if (nameEmpty(name)) {
      if (studentidEmpty(studentid)) {
            if (emailEmpty(email)) {
                if (digitCheck(studentid)) {
                    if (checkEmail(email)) {
                        verify(name, studentid)
                    }
                }
            }
      }
  }
  return false;
}

function studentidEmpty(studentid) {
  if (studentid == "") {
    alert("Please provide your student id!");
    studentid.focus();
    return false;
  }
}

function nameEmpty(name) {
  if (name == "") {
    alert("Please provide your name!");
    name.focus();
    return false;
  }
}

function emailEmpty(email) {
  if (email == "") {
    alert("Please provide your email!");
    email.focus();
    return false;
  } 
}

function digitCheck(studentid) {
  var ok = studentid.search(".{8,}");
  if (ok != 0) {
    alert("Please provide ID with 8 digits.");
    return false;
  }
}

function checkEmail(email) {
  var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if (!filter.test(email.value)) {
    alert('Please provide a valid email address');
    email.focus;
    return false;
  }
}

function verify(name, studentid) {
  var personList = [
    ["Joe", 11111111],
    ["Tammy", 22222222],
    ["Jones", 33333333]
  ];
  for (list in personList) {
    if (name in list && studentid in list) {
      alert("Welcome! An email verification with be sent soon.");
      return true;
    } else {
      alert("Student Name and/or ID not found in records");
      return false;
    }
  }
}