无法通过javascript向php提交表单

问题描述：

I have a form in html which I want to run verification in Javascript first before POST ing to PHP. However the link up to the PHP section does not seem to be working despite the fact that I have assigned names to each input tag and specified an action attribute in the form tag.

Here is the HTML code for the form:

<form id="signupform" action="signupform.php" method="post">
  <input type="text" name="Email" placeholder="Email Address" class="signupinput" id="email" />
  <br />
  <input type="password" name="Password" placeholder="Password" class="signupinput" id="passwordone" />
  <br />
  <input type="password" placeholder="Repeat Password" class="signupinput" id="passwordtwo" />
  <br />
  <input type="button" value="Sign Up" class="signupinput" onClick="verifypass()" id="submit" />
</form>

The button calls the javascript function which I use to verify the values of my form before sending to php:

function verifypass() {
  var form = document.getElementById("signupform");
  var email = document.getElementById("email").value;
  var password1 = document.getElementById("passwordone").value;
  var password2 = document.getElementById("passwordtwo").value;
  var emailcode = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      if (emailcode.test(email)) {
        if (password1.length > 6) {
          if (password1 == password2) {
            form.submit(); //this statement does not execute
          } else {
            $("#passwordone").notify("Passwords do not match!", {
              position: "right"
            })
          }
        } else {
          $("#passwordone").notify("Password is too short!", {
            position: "right"
          })
        }
      } else {
        $("#email").notify("The email address you have entered is invalid.", {
          position: "right"
        })
      }
    }

我在html中有一个表单，我希望在发布到PHP之前先在Javascript中运行验证。但是，尽管我已经为每个输入标记指定了名称并在表单标记中指定了一个action属性，但是到PHP部分的链接似乎并不起作用。 p>

这是表单的HTML代码： p>

 ＆lt; form id =“signupform”action =“signupform.php”method =“post”＆gt; 
＆lt; input type =“  text“name =”Email“placeholder =”Email Address“class =”signupinput“id =”email“/＆gt; 
＆lt; br /＆gt; 
＆lt; input type =”password“name =”Password“占位符 =“密码”class =“signupinput”id =“passwordone”/＆gt; 
＆lt; br /＆gt; 
＆lt;输入类型=“密码”占位符=“重复密码”class =“signupinput”id =“passwordtwo  “/＆gt; 
＆lt; br /＆gt; 
＆lt; input type =”button“value =”注册“class =”signupinput“onClick =”verifypass（）“id =”submit“/＆gt; 
＆lt  ; / form＆gt; 
  code>  pre> 
 
 该按钮调用javascript函数，用于在发送到php之前验证表单的值： p> 
 
  
  function verifypass（）{
 var form = document.getElementBy  Id（“signupform”）; 
 var email = document.getElementById（“email”）。value; 
 var password1 = document.getElementById（“passwordone”）。value; 
 var password2 = document.getElementById（“passwordtwo”  “）.value; 
 var emailcode = / ^（（[^＆lt;＆gt;（）\ [\] \\。，;：\ s @”] +（\。[^＆lt;＆gt;（）\  [\] \\;：\ S @ “] +）*）|（” +“））@（（\ [[0-9] {1,3} \ [0-9] {1。  ，3} \ [0-9] {1,3} \ [0-9] {1,3}]）|。。（（[A-ZA-Z \  -  0-9] + \）+ [  a-zA-Z] {2，}））$ /; 
 
 if（emailcode.test（email））{
 if（password1.length＆gt;  6）{
 if（password1 == password2）{
 form.submit（）;  //此语句不执行
} else {
 $（“＃passwordone”）。notify（“密码不匹配！”，{
位置：“右”
}）
} 
}  else {
 $（“＃passwordone”）。notify（“密码太短！”，{
位置：“右”
}）
} 
}其他{
 $（“＃email”  ）.notify（“您输入的电子邮件地址无效。”，{
位置：“正确”
}）
} 
} 
   code>  pre> 
  div>

答

For some reason, some JavaScript implementations mix up HTML element IDs and code. If you use a different ID for your submit button it will work (id="somethingelse" instead of id="submit"):

<input type="button" value="Sign Up" class="signupinput" onClick="verifypass()" id="somethingelse" />

(I think id="submit" has the effect that the submit method is overwritten on the form node, using the button node. I never figured out why, perhaps to allow shortcuts like form.buttonid.value etc. I just avoid using possible method names as IDs.)

答

I think it would be better if you do it real time, for send error when the user leave each input. For example, there is an input, where you set the email address. When the onfocusout event occured in Javascript you can add an eventlistener which is call a checker function to the email input. There is a quick example for handling form inputs. (Code below) It is not protect you against the serious attacks, because in a perfect system you have to check on the both side.

Description for the Javascript example:

There is two input email, and password and there is a hidden button which is shown if everything is correct.
The email check and the password check functions are checking the input field values and if it isn't 3 mark length then show error for user.
The showIt funciton get a boolean if it is true it show the button to submit.
The last function is iterate through the fields object where we store the input fields status, and if there is a false it return false else its true. This is the boolean what the showIt function get.

Hope it is understandable.

<style>
#send {
  display: none;
}
</style>
<form>
<input type="text" id="email"/>
<input type="password" id="password"/>
<button id="send" type="submit">Send</button>
</form>
<div id="error"></div>

<script>
var fields = {
    email: false,
  password: false
};

var email = document.getElementById("email");
email.addEventListener("focusout", emailCheck, false);
var password = document.getElementById("password");
password.addEventListener("focusout", passwordCheck, false);

function emailCheck(){
    if(email.value.length < 3) {
    document.getElementById("error").innerHTML = "Bad Email";
    fields.email = false;
  } else {
    fields.email = true;
    document.getElementById("error").innerHTML = "";
  }
  show = checkFields();
  console.log("asdasd"+show);
  showIt(show);
}

function passwordCheck(){
    if(password.value.length < 3) {
    document.getElementById("error").innerHTML = "Bad Password";
    fields.password = false;
  } else {
    fields.password = true;
    document.getElementById("error").innerHTML = "";
  }
  show = checkFields();
  console.log(show);
  showIt(show);
}

function showIt(show) {
    if (show) {
    document.getElementById("send").style.display = "block";
  } else {
    document.getElementById("send").style.display = "none";
  }
}


function checkFields(){
    isFalse = Object.keys(fields).map(function(objectKey, index) {
    if (fields[objectKey] === false) {
        return false;
    }
    });
  console.log(isFalse);
  if (isFalse.indexOf(false) >= 0) {
    return false;
  }
  return true;
}
</script>

答

I'm not sure why that's not working, but you get around having to call form.submit(); if you use a <input type="submit"/> instead of <input type="button"/> and then use the onsubmit event instead of onclick. That way, IIRC, all you have to do is return true or false.

无法通过javascript向php提交表单

相关推荐