Question

我需要一些帮助让JS表单验证工作。

我在html头中链接的.js脚本文件中有表单规则。

规则示例：

    function IsValid4DigitZip( str ) {
    // Return immediately if an invalid value was passed in
    if (str+"" == "undefined" || str+"" == "null" || str+"" == "")  
        return false;

    var isValid = true;

    str += "";

    // Rules: zipstr must be 5 characters long, and can only contain numbers from
   // 0 through 9
   if (IsBlank(str) || (str.length != 4) || !IsInt(str, false))
        isValid = false;

   return isValid;
} // end IsValid4DigitZip

这是我的HTML：

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>orderbooks</title>
<link rel="stylesheet" href="styles.css">
<script src="datavalidation.js"></script>
<script type="text/javaScript">
function validate(orderbooks){
var digits="0123456789" 
var temp 

if ( IsValid4DigitZip(document.orderbooks.Postcode.value) ) {
  // Zip code is valid
} else {
alert("Invalid postcode:)
  // Zip code is invalid
}
return true 
} 
</script>
</head>
<body>
   <form name="orderbooks" onSubmit="return validate(orderbooks)" >
    Name: <input type="text" size="20" name="Name">
    Street Number:  <input type="text" size="5" name="streetnumber" maxlength="5">
    Street Name: <input type="text" size="20" name="streetname" maxlength="25">
    Postcode: <input type="text" size="4" name="postcode" maxlength="4">
    Telephone: <input type="text" size="11" name="telephone" maxlength="11">
    Email: <input type="text" size="20" name="email" maxlength="50">
    <input type="reset" value="Clear the Form">
    <input type="submit" value="Submit Form">
</form>
</body>
</html>

我做错了什么？我无法显示警告或警告。

好的我得到了邮政编码以处理错误信息！我有另一个问题。

如果我想添加此表单验证规则：

    function IsNum( numstr ) {
    // Return immediately if an invalid value was passed in
    if (numstr+"" == "undefined" || numstr+"" == "null" || numstr+"" == "") 
        return false;

    var isValid = true;
    var decCount = 0;       // number of decimal points in the string

    // convert to a string for performing string comparisons.
    numstr += "";   

    // Loop through string and test each character. If any
    // character is not a number, return a false result.
    // Include special cases for negative numbers (first char == '-')
    // and a single decimal point (any one char in string == '.').   
    for (i = 0; i < numstr.length; i++) {
        // track number of decimal points
        if (numstr.charAt(i) == ".")
            decCount++;

        if (!((numstr.charAt(i) >= "0") && (numstr.charAt(i) <= "9") || 
                (numstr.charAt(i) == "-") || (numstr.charAt(i) == "."))) {
        isValid = false;
        break;
        } else if ((numstr.charAt(i) == "-" && i != 0) ||
                (numstr.charAt(i) == "." && numstr.length == 1) ||
              (numstr.charAt(i) == "." && decCount > 1)) {
        isValid = false;
        break;
      }                                
//if (!((numstr.charAt(i) >= "0") && (numstr.charAt(i) <= "9")) || 
   } // END for   

    return isValid;
}  // end IsNum

我是否可以通过直接在第一个函数规则下的html中键入它来添加它：

     if (IsNum(document.orderbooks.querySelectorAll("[name=postcode]")[0].value)) {
    // Zip code is valid
  } else {
    alert("Postcode invalid! Please use only numbers:");
    return false;
  }

我会这样做吗？

Answer 1

代码中有两个问题：

警报缺少双引号。
发送给IsValid4DigitZip的邮政编码值错误。

替换

document.orderbooks.Postcode.value

带

document.orderbooks.querySelectorAll("[name=postcode]")[0].value

更新了validate功能代码：

function validate(orderbooks) {
  var digits = "0123456789"
  var temp

  if (IsValid4DigitZip(document.orderbooks.querySelectorAll("[name=postcode]")[0].value)) {
    // Zip code is valid
  } else {
    alert("Invalid postcode:");
    return false;
  }
  return true
}

 function validate(orderbooks) {
      var digits = "0123456789"
      var temp

      if (IsValid4DigitZip(document.orderbooks.querySelectorAll("[name=postcode]")[0].value)) {
        // Zip code is valid
      } else {
        alert("Invalid postcode:");
        return false;
      }
      return true
    }

    function IsValid4DigitZip(str) {
      // Return immediately if an invalid value was passed in
      if (str + "" == "undefined" || str + "" == "null" || str + "" == "")
        return false;

      var isValid = true;

      str += "";

      // Rules: zipstr must be 5 characters long, and can only contain numbers from
      // 0 through 9
      if ((str.trim().length != 4) || !isNumeric(str.trim()))
        isValid = false;

      return isValid;
    } // end IsValid4DigitZip

    //Check for numbers
    function isNumeric(n) {
      return !isNaN(parseFloat(n)) && isFinite(n);
    }

<form name="orderbooks" onSubmit="return validate(orderbooks)">
  Name: <input type="text" size="20" name="Name"> Street Number: <input type="text" size="5" name="streetnumber" maxlength="5">    Street Name: <input type="text" size="20" name="streetname" maxlength="25"> Postcode: <input type="text" size="4" name="postcode"
    maxlength="4"> Telephone: <input type="text" size="11" name="telephone" maxlength="11"> Email: <input type="text" size="20"
    name="email" maxlength="50">
  <input type="reset" value="Clear the Form">
  <input type="submit" value="Submit Form">
</form>

Javascript表单验证。没有错误消息。没有弹出窗口

1 个答案: