Question

我正在尝试使用此验证。问题是即使我已经更改了POST，也没有检测到POST。结果仍显示在URI中。任何人都可以帮忙吗？我真的很喜欢java脚本。

这是php / HTML代码：

<?php 
if ($_SERVER["REQUEST_METHOD"] == "POST") { 
echo " Form submited....!!!!";
}
?>

<head>
      <script src="JSFormValidation.js"></script>
    </head>

    <body>     
      <form id="formTest" method="get" action="">
        <table>
        <tr>
          <td><label for="txtName">Name<span class="required">*</span></label></td>
          <td><input type="text" id="txtName" name="name"></td>
          <td id="elmNameError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td><label for="txtAddress">Address</label></td>
          <td><input type="text" id="txtAddress" name="address"></td>
          <td id="elmAddressError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td><label for="txtZipcode">Zip Code<span class="required">*</span></label></td>
          <td><input type="text" id="txtZipcode" name="zipcode"></td>
          <td id="elmZipcodeError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td>Country<span class="required">*</span></td>
          <td><select id="selCountry" name="country">
                <option value="" selected>Please select...</option>
                <option value="AA">AA</option>
                <option value="BB">BB</option>
                <option value="CC">CC</option>
              </select></td>
          <td id="elmCountryError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td>Gender<span class="required">*</span></td>
          <td><label><input type="radio" name="gender" value="m">Male</label>
              <label><input type="radio" name="gender" value="f">Female</label></td>
          <td id="elmGenderError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td>Preferences<span class="required">*</span></td>
          <td><label><input type="checkbox" name="color" value="r">Red</label>
              <label><input type="checkbox" name="color" value="g">Green</label>
              <label><input type="checkbox" name="color" value="b">Blue</label></td>
          <td id="elmColorError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td><label for="txtPhone">Phone<span class="required">*</span></label></td>
          <td><input type="text" id="txtPhone" name="phone"></td>
          <td id="elmPhoneError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td><label for="txtEmail">Email<span class="required">*</span></label></td>
          <td><input type="text" id="txtEmail" name="email"></td>
          <td id="elmEmailError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td><label for="txtPassword">Password (6-8 characters)<span class="required">*</span></label></td>
          <td><input type="password" id="txtPassword" name="password"></td>
          <td id="elmPasswordError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td><label for="txtPWVerified">Verify Password<span class="required">*</span></label></td>
          <td><input type="password" id="txtPWVerified" name="pwVerified"></td>
          <td id="elmPWVerifiedError" class="errorMsg">&nbsp;</td></tr>
        <tr>
          <td>&nbsp;</td>
          <td><input type="submit" value="SEND" id="btnSubmit">&nbsp;
              <input type="reset" value="CLEAR" id="btnReset"></td>
          <td>&nbsp;</td></tr>
        </table>
      </form>

JSFormValidation.js脚本：

window.onload = init;

function init() {
   document.getElementById("formTest").onsubmit = validateForm;
   document.getElementById("btnReset").onclick = clearForm;
   document.getElementById("txtName").focus();
}

function validateForm(theForm) {
   with(theForm) {
      // return false would prevent default submission
      return (isNotEmpty(txtName, "Please enter your name!", elmNameError)
           && isNumeric(txtZipcode, "Please enter a 5-digit zip code!", elmZipcodeError)
           && isLengthMinMax(txtZipcode, 5, 5, "Please enter a 5-digit zip code!", elmZipcodeError)
           && isSelected(selCountry, "Please make a selection!", elmCountryError)
           && isChecked("gender", "Please check a gender!", elmGenderError)
           && isChecked("color", "Please check a color!", elmColorError)
           && isNumeric(txtPhone, "Please enter a valid phone number!", elmPhoneError)
           && isValidEmail(txtEmail, "Enter a valid email!", elmEmailError)
           && isValidPassword(txtPassword, "Password shall be 6-8 characters!", elmPasswordError)
           && verifyPassword(txtPassword, txtPWVerified, "Different from new password!",
                 elmPWVerifiedError)
      );
   }
}


function postValidate(isValid, errMsg, errElm, inputElm) {
   if (!isValid) {
      if (errElm !== undefined && errElm !== null
            && errMsg !== undefined && errMsg !== null) {
         errElm.innerHTML = errMsg;
      }

      if (inputElm !== undefined && inputElm !== null) {
         inputElm.classList.add("errorBox");  // Add class for styling
         inputElm.focus();
      }
   } else {

      if (errElm !== undefined && errElm !== null) {
         errElm.innerHTML = "";
      }
      if (inputElm !== undefined && inputElm !== null) {
         inputElm.classList.remove("errorBox");
      }
   }
}


function isNotEmpty(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim() !== "");
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function isNumeric(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim().match(/^\d+$/) !== null);
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function isAlphabetic(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim().match(/^[a-zA-Z]+$/) !== null) ;
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function isAlphanumeric(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim().match(/^[0-9a-zA-Z]+$/) !== null);
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}


function isLengthMinMax(inputElm, minLength, maxLength, errMsg, errElm) {
   var inputValue = inputElm.value.trim();
   var isValid = (inputValue.length >= minLength) && (inputValue.length <= maxLength);
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function isValidEmail(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim().match(
         /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/) !== null);
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}

function isSelected(selectElm, errMsg, errElm) {
   var isValid = (selectElm.value !== "");   // value in selected <option>
   postValidate(isValid, errMsg, errElm, selectElm);
   return isValid;
}


function isChecked(inputName, errMsg, errElm) {
   var elms = document.getElementsByName(inputName);
   var isChecked = false;
   for (var i = 0; i < elms.length; ++i) {
      if (elms[i].checked) {
         isChecked = true;
         break;
      }
   }
   postValidate(isChecked, errMsg, errElm, null);  // no focus element
   return isChecked;
}

function isValidPassword(inputElm, errMsg, errElm) {
   var isValid = (inputElm.value.trim().match(/^\w{6,8}$/) !== null);
   postValidate(isValid, errMsg, errElm, inputElm);
   return isValid;
}


function verifyPassword(pwElm, pwVerifiedElm, errMsg, errElm) {
   var isTheSame = (pwElm.value === pwVerifiedElm.value);
   postValidate(isTheSame, errMsg, errElm, pwVerifiedElm);
   return isTheSame;
}


function clearForm() {
   // Remove class "errorBox" from input elements
   var elms = document.querySelectorAll('.errorBox');  // class
   for (var i = 0; i < elms.length; i++) {
      elms[i].classList.remove("errorBox");
   }

   // Remove previous error messages
   elms = document.querySelectorAll('[id$="Error"]');  // id ends with Error
   for (var i = 0; i < elms.length; i++) {
      elms[i].innerHTML = "";
   }

   // Set initial focus
   document.getElementById("txtName").focus();
}

源代码：http://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/JavaScript_Examples.html

Answer 1

您可以将表单method属性更改为“post”而不是“get”：

<form id="formTest" method="post" action="">...</form>

这假定帖子应该在同一页面上。如果不同，请将action更改为目标页面。

如何用POST提交

1 个答案: