JavaScript表单验证错误未打印

JavaScript form validation error not printing

本文关键字：打印 错误 验证 表单 JavaScript      更新时间：2023-09-26

我使用以下代码来验证一个表单，并希望在出现错误时在字段下方显示错误:

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
.errorcss {
   background-color: yellow;
   color:red;
}
</style>
<script type="text/javascript">
error=" ";
function isBlank(s) {
  var len=s.length
  var i
  for(i=0; i<len; ++i) {
    if(s.charAt(i) != " ") return false
  }
  return true
}
function validate(fieldName, fieldValue) {
  if(isBlank(fieldValue)) {
     error = fieldName + " cannot be left blank.";
     alert(fieldName+" cannot be left blank.")
     return false
  }
  return true
}
function validatePass(passwordValue, confirmPasswordValue) {
  if (passwordValue !== confirmPasswordValue) {
     alert("Password and Confirm Password do not match")
     return false
  }
  return true
}

function validateForm() {
  if(!validate("The last name field", document.contest.last.value))
     return false
  if(!validate("The email field", document.contest.email.value))
     return false
  if(!validate("The password field", document.contest.pass.value))
     return false
  if(!validatePass(document.contest.pass.value, document.contest.repass.value))
     return false
  if(!validate("The description field", document.contest.desc.value))
     return false
}
</script>
</head>
<body>
<form name="contest" onSubmit = "return validateForm()" method="GET">
<h2 align="center">Sign Up Form</h2>
<p>
*Last Name:<input type="text" name="last" size="16">
First Name:<input type="text" name="first" size="12">
Middle Initial:<input type="text" name="initial" size="2">
</p>
<div class="errorcss">
   <script type="text/javascript">document.write(error);</script>
</div>
<p>
*E-mail Address:<input type="email" name="email">
*Password:<input type="password" size="10" name="pass">
*Confirm Password:<input type="password" size = "10" name="repass">
</p>
<p>
In 50 words or less, describe yourself:
</p>
<textarea name="desc" ROWS="5" COLS="40"></textarea>
<p>
Submit your form:<input type="SUBMIT" value="Submit my form">
</p>
</form>
</body>
</html>

我面临的问题是，我希望没有姓氏错误显示在div与errorcss类。但它没有显示它。此外，我想知道如何显示所有的错误，每当他们使用JavaScript和CSS发生。

我添加了15个分号，删除了错误div内的脚本，给errordiv一个id ('errordiv')，并添加:

document.getElementById('errordiv').innerText=error;

函数validateForm(); .

结果代码:

<!DOCTYPE html>
<html >
<head >
    <style type="text/css" >
        .errorcss {
            background-color : yellow;
            color            : red;
        }
    </style >
    <script type="text/javascript" >
        error = " ";
        function isBlank( s )
        {
            var len = s.length;
            var i;
            for ( i = 0; i < len; ++i ) {
                if ( s.charAt( i ) != " " ) return false;
            }
            return true;
        }
        function validate( fieldName, fieldValue )
        {
            if ( isBlank( fieldValue ) ) {
                error = fieldName + " cannot be left blank.";
                alert( fieldName + " cannot be left blank." );
                return false;
            }
            return true;
        }
        function validatePass( passwordValue, confirmPasswordValue )
        {
            if ( passwordValue !== confirmPasswordValue ) {
                alert( "Password and Confirm Password do not match" );
                return false;
            }
            return true;
        }
        function validateForm()
        {
            if ( !validate( "The last name field", document.contest.last.value ) ) {
                document.getElementById( 'errordiv' ).innerText = error;
                return false;
            }
            if ( !validate( "The email field", document.contest.email.value ) ) {
                return false;
            }
            if ( !validate( "The password field", document.contest.pass.value ) ) {
                return false;
            }
            if ( !validatePass( document.contest.pass.value, document.contest.repass.value ) ) {
                return false;
            }
            if ( !validate( "The description field", document.contest.desc.value ) ) {
                return false;
            }
        }
    </script >
</head >
<body >
    <form name="contest" onSubmit="return validateForm()" method="GET" >
        <h2 align="center" >Sign Up Form</h2 >
        <p >
            *Last Name:<input type="text" name="last" size="16" > First Name:<input type="text" name="first" size="12" > Middle Initial:<input type="text" name="initial" size="2" >
        </p >
        <div class="errorcss" id="errordiv" >
        </div >
        <p >
            *E-mail Address:<input type="email" name="email" > *Password:<input type="password" size="10" name="pass" > *Confirm Password:<input type="password" size="10" name="repass" >
        </p >
        <p >
            In 50 words or less, describe yourself:
        </p >
        <textarea name="desc" ROWS="5" COLS="40" ></textarea >
        <p >
            Submit your form:<input type="SUBMIT" value="Submit my form" >
        </p >
    </form >
</body >

有很多问题，其中之一是:

  <div class="errorcss">
    <script type="text/javascript">
      document.write(error);//code fails on page load
    </script>
  </div>

看这里:

function isBlank(s) {
  return 0 === s.replace(/'s/g, '').length;
}
function validate(fieldName, fieldValue) {
  if (isBlank(fieldValue)) {
    alert(fieldName + " cannot be left blank.")
    return false
  }
  return true
}
function validatePass(passwordValue, confirmPasswordValue) {
  if (passwordValue !== confirmPasswordValue) {
    alert("Password and Confirm Password do not match")
    return false
  }
  return true
}
function validateForm() {
  if (!validate("The last name field", document.contest.last.value))
    return false
  if (!validate("The email field", document.contest.email.value))
    return false
  if (!validate("The password field", document.contest.pass.value))
    return false
  if (!validatePass(document.contest.pass.value, document.contest.repass.value))
    return false
  if (!validate("The description field", document.contest.desc.value))
    return false
}
<form name="contest" onSubmit="return validateForm()" method="GET">
  <h2 align="center">Sign Up Form</h2>
  *Last Name:
  <input type="text" name="last" size="16">
  <br/>First Name:
  <input type="text" name="first" size="12">
  <br/>Middle Initial:
  <input type="text" name="initial" size="2">
  <br/>*E-mail Address:
  <input type="email" name="email">
  <br/>*Password:
  <input type="password" size="10" name="pass">
  <br/>*Confirm Password:
  <input type="password" size="10" name="repass">
  <br/>In 50 words or less, describe yourself:
  <textarea name="desc" ROWS="5" COLS="40"></textarea>
  <br/>Submit your form:
  <input type="SUBMIT" value="Submit my form">
</form>

相关文章：