0

我正在制作一个表单，并在表单中有一堆函数来验证某些字段，但我遇到的问题是，当你提交每个返回 false 的验证时，会弹出一个警报，所以它最终会变成很多警报。

有没有办法改变对函数或函数本身的调用，以便一次只弹出一个警报？

我的表单目前的工作原理是，如果您提交表单并将名字和姓氏字段留空并且两个字段都是必填字段，则会弹出两个警报，说您没有填写名字并且您没有填写姓氏（可能会对我拥有的字段数量感到恼火）。

我正在尝试找出一种方法，以便如果您提交表单并将两个字段都留空，只会弹出一个警报，说您尚未填写名字，然后当您填写名字字段并有仍然将姓氏字段留空，然后会弹出一条警报，提示您尚未填写姓氏。

这是我拥有的主要验证功能块：

function validateText() 
{
var firstname=document.getElementById('txtfirstname');
var familyname=document.getElementById('txtfamilyname');
var streetaddress=document.getElementById('txtaddress');
var suburb=document.getElementById('txtsuburb');
var postcode=document.getElementById('txtpostcode');
var country=document.getElementById('txtcountry');
var telephone=document.getElementById('txttelephone');
var email=document.getElementById('txtemail');
var regodate=document.getElementById('txtregodate');
var regocost=document.getElementById('txtregocost');

if (firstname.value=="")
{
     alert("First name must be filled out");
     return false;
}
if (familyname.value=="")
{
     alert("Family name must be filled out");
     return false;
}

var institutioncompany=document.getElementById('txtinstcomp').value;
if (institutioncompany == "") 
{
     alert("Institution/company must be filled out");
     return false;
}
var category=document.getElementById('category').value;
if (category == "UWS Student" || category == "Other UWS Staff" || category == "UWS Academic")
{
    if (document.getElementById("txtnumber").value == "")
    {
        alert('Student number/Staff number is mandatory');
        return;
    }
}

if (streetaddress.value=="")
{
     alert("Street address must be filled out");
     return false;
}
 if (suburb.value=="")
{
     alert("Suburb must be filled out");
     return false;
}
 if (postcode.value=="")
{
     alert("Postcode must be filled out");
     return false;
}
 if (country.value=="")
{
     alert("Country must be filled out");
     return false;
}
 if (telephone.value=="")
{
     alert("Telephone number must be filled out");
     return false;
}
 if (email.value=="")
{
     alert("Email address must be filled out");
     return false;
}
 if (regodate.value=="")
{
     alert("Date of registration must be filled out");
     return false;
}
 if (regocost.value=="")
{
     alert("Cost of registration must be filled out");
     return false;
}
}


function validateCheckBoxes(theForm) 
{
if (
theForm.checkbox.checked == false &&
theForm.checkbox1.checked == false &&
theForm.checkbox2.checked == false)
{
    alert ('You didn\'t choose any of the checkboxes');
    return false;
} else {    
    return true;
}
}

function validateRadioButton() 
{
var radios = document.getElementsByName('yesno');

for (var i = 0; i < radios.length; i++) 
{
    if (radios[i].checked) 
{
    return true; //checked
}
};
// not checked, show error
alert ('You didn\'t choose whether you wanted a copy of work proceedings');
return false;
}


function validateEmail() 
{
var emailID = document.rego.email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || (dotpos - atpos < 2 ))
{
    alert("Please enter correct email ID");
    return false;
}
return(true);
}

这是我调用某些函数的方式：

<form name="rego" action="submit.htm" onsubmit="return !!(validateText() & validateCheckBoxes(this) & validateRadioButton() & validateEmail() & populateInstitution());" method="POST">
4

2 回答 2

1

& 表示 JavaScript 中的按位与 && 是逻辑与，所以

   !!(validateText() 
    & validateCheckBoxes(this) 
    & validateRadioButton() 
    & validateEmail() 
    & populateInstitution())

将导致每个函数的求值和所有结果的按位和运算。

当你这样做时：

   !!(validateText() 
    && validateCheckBoxes(this) 
    && validateRadioButton() 
    && validateEmail() 
    && populateInstitution())

第一个返回 false 的函数将结束评估，因为 False AND(logical) 其他任何内容都将以 false 结束...这是 JavaScript 的内部优化，因此第一个返回 false 之后的函数将不会被评估，换句话说...

于 2013-04-12T06:23:45.580 回答
0

所以我还没来得及发表我的评论作为答案就被打断了。

如果我不想要 jQuery 验证，我会考虑以下内容。

关键问题是试图保持一致。你需要在任何地方返回真假

形式：

<form onsubmit="return validate(this)"...>

JavaScript：

function validate(theForm)  {
  return validateText() &&
         validateCategory(document.getElementById("txtcategory")) &&
         validateCheckBoxes(theForm) &&
         validateEmail(theForm);

}

function validateCategory(category) {
  var val = category.value;
  if (document.getElementById("txtnumber").value == "" && (val == "UWS Student" || val == "Other UWS Staff" || val == "UWS Academic")) {
    alert('Student number/Staff number is mandatory');
    document.getElementById("txtnumber").focus();
    return false;
  }
  return true;
}

var mandatory = {
 firstname: "First name must be filled out",
 familyname: "Family name must be filled out",
 instcomp : "Institution/company must be filled out",
 streetaddress: "Street address must be filled out",
 suburb: "Suburb must be filled out",
 postcode: "Postcode must be filled out",
 country:"Country must be filled out",
 telephone: "Telephone number must be filled out",
 email:"Email address must be filled out",
 regodate:"Date of registration must be filled out",
 regocost:"Cost of registration must be filled out"
}; // note no comma after the last

function validateText() {
  for (var o in mandatory) {
    var fld = document.getElementById("txt"+o);
    if (fld.value==="") {
      alert(mandatory[o]);
      fld.focus();
      return false;
    }
  }
  return true;
}
function validateCheckBoxes(theForm) {
  if (theForm.checkbox.checked && theForm.checkbox1.checked && theForm.checkbox2.checked) return true;
  alert ('You didn\'t choose any of the checkboxes');
  return false;
}

function validateRadioButton() {
var radios = document.getElementsByName('yesno');
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    return true; //checked
  }
}
// not checked, show error
  alert ('You didn\'t choose whether you wanted a copy of work proceedings');
  return false;
}
function validateEmail(theForm)  {
  var email = theForm.email;
  var emailID = email.value;
  atpos = emailID.indexOf("@");
  dotpos = emailID.lastIndexOf(".");
  if (atpos < 1 || (dotpos - atpos < 2 )) {
    alert("Please enter correct email ID");
    email.focus();
    return false;
  }
  return true;
}
于 2013-04-12T07:06:18.133 回答