Question

我正在我的网站上实施这个多步骤表格并进行验证： https://www.w3schools.com/howto/howto_js_form_steps.asp

一切都很完美，我稍微修改了代码以验证选择下拉。

我的问题是我无法将电子邮件地址输入验证为电子邮件地址。它会验证我的电子邮件地址字段是否包含soemthing，但不是它是否是实际的电子邮件地址。

这是我工作的js：

var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tabStep");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
  document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
  document.getElementById("nextBtn").innerHTML = "Submit";
} else {
  document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}

function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tabStep");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("mobileReg").submit();
return false;
}
// Otherwise, display the correct tab:
showTab(currentTab);
}

function validateForm() {
// This function deals with validation of the form fields
var x, y, z, i, valid = true;
x = document.getElementsByClassName("tabStep");
y = x[currentTab].getElementsByTagName("input");
z = x[currentTab].getElementsByTagName("select");

// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
  // add an "invalid" class to the field:
  y[i].className += " invalid";
  // and set the current valid status to false:
  valid = false;
 }
}
for (i = 0; i < z.length; i++) {
// If a field is empty...
if (z[i].value == "") {
  // add an "invalid" class to the field:
  z[i].className += " invalid";
  // and set the current valid status to false:
  valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
  document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}


function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
  x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}

我尝试将以下内容合并到validateForm（）函数中，但是无法让我工作：

function ValidateEmail(inputText)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(inputText.value.match(mailformat))
{
document.form1.text1.focus();
return true;
}
else
{
alert("You have entered an invalid email address!");
document.form1.text1.focus();
return false;
}
}

我也看了看：How to validate an email address in JavaScript? 但似乎无法在不杀死它的情况下在此脚本中实现它。

任何指针都会非常感激

非常感谢

d

包含电子邮件验证问题的多步表单

0 个答案: