ajax formdata附近的javascript表单验证

我想插入到数据库没有刷新代码，我也想复位形式，也与javascript活过滤器，当我使用这段代码，它不工作，并打开新的黑色页面sucms.php，但插入到数据库，有什么问题，任何人都可以告诉我？当我提交这个表单时，它指向新的页面sucms.php，有什么问题吗？

function fsocietyApp() {
  var img = document.getElementById('uploadphoto');
  var fup = img.value;
  var error = document.getElementById('fsoc');
  var ex = fup.substring(fup.lastIndexOf('.') + 1).toLowerCase();

  var website = document.getElementById('website');
  var webUrl = document.getElementById('webUrl');
  var re = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
  //firstname
  if (fnvaluf.value.length == 0) {
    fnufb.innerHTML = 'First name is required';
    fnvaluf.classList.add('errorb');
    return false;
  } else if (/[^a-zA-Z0-9\-\/]/.test(fnvaluf.value) && fnvaluf.value.length != 0) {
    fnuf.innerHTML = 'Only letters [a-z],numbers [0-9] are allowed';
    fnvaluf.classList.add("error");
    platform = 'off';
    fnufb.innerHTML = '';
    fnvaluf.classList.remove('errorb');
    return false;
  }
  //lastname
  else if (lnvaluf.value.length == 0) {
    lnufb.innerHTML = 'Last name is required';
    lnvaluf.classList.add('errorb');
    return false;
  } else if (/[^a-zA-Z0-9\-\/]/.test(lnvaluf.value) && lnvaluf.value.length > 0) {
    lnuf.innerHTML = 'Only letters [a-z],numbers [0-9] are allowed';
    lnvaluf.classList.add("error");
    platform = 'off';
    lnufb.innerHTML = '';
    lnvaluf.classList.remove('errorb');
    return false;
  }
  //username
  else if (x.value.length == 0) {
    y.innerHTML = "Username is required";
    x.classList.add("error");
    platform = 'off';
    nfsoc.style.color = "white";
    return false;
  } else if (x.value.length < 4) {
    x.classList.add("error");
    platform = 'off';
    nfsoc.style.color = "white";
    y.innerHTML = "Use 4 characters or more";
    return false;
  } else if (x.value.length > 12) {
    platform = 'off';
    x.classList.add("error");
    nfsoc.style.color = "white";
    y.innerHTML = "Use 12 characters or less";
    return false;
  } else if (/[^a-zA-Z0-9\-\/]/.test(x.value) && x.value.length > 0) {
    y.innerHTML = 'Only letters [a-z],numbers [0-9] are allowed';
    x.classList.add("error");
    platform = 'off';
    return false;
  }
  //email
  else if (!hashOne.test(email.value) || !hashTwo.test(email.value) || !hashThree.test(email.value)) {
    emailuf.innerHTML = "Invalid E-mail address";
    email.classList.add('error');
    platform = 'on';
    return false;
  } else if (email.value.length == 0) {
    emailuf.innerHTML = "E-mail is required";
    email.classList.add('error');
    return false;
  }
  //password
  else if (password.value.length < 6 && password.value.length != 0) {
    pswuf.innerHTML = "Use 6 characters or more";
    password.classList.add('error');
    return false;
  } else if (password.value.length == 0) {
    pswuf.innerHTML = "Password is required";
    password.classList.add('error');
    return false;
  }
  //repeat password
  else if (password.value != rpassword.value && password.value.length != 0) {
    rpswuf.innerHTML = "Your passwords do not match";
    rpassword.classList.add('error');
    platform = 'off';
    return false;
  } else if (password.value.length == 0 && rpassword.value.length != 0) {
    rpswuf.innerHTML = "";
    rpassword.classList.remove('error');
    return false;
  } else if (document.getElementById("uploadphoto").files.length != 0 && ex != "gif" && ex != "png" && ex != "bmp" && ex != "jpeg" && ex != "jpg") {
    error.innerHTML = "<img style='position:relative;bottom:12px' src='img/red.png' alt='error'>";
    return false;
  } else if (website.value !== '') {
    if (!re.test(website.value)) {
      if (!re.test(website.value)) {
        website.classList.add('error');
        webUrl.innerHTML = "Invalid URL Address";
        return false;
      }
    }
  }
  $(document).ready(function() {
    $("#formid").submit(function(e) {
      var formObj = $(this);
      var formURL = formObj.attr("action");

      if (window.FormData !== undefined) {
        var formData = new FormData(this);
        $.ajax({
          url: formURL,
          type: 'POST',
          data: formData,
          mimeType: "multipart/form-data",
          contentType: false,
          cache: false,
          processData: false,
          success: function(data, textStatus, jqXHR) {
            $("#multi-msg").html('<pre><code>' + data + '</code></pre>');
            $("#formid")[0].reset();
          },
          error: function(jqXHR, textStatus, errorThrown) {
            $("#multi-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
          }
        });
        e.preventDefault();
        e.unbind();
      }
    });
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formid" method="post" onsubmit="return fsocietyApp()" action="phppath/sucms.php" enctype="multipart/form-data">
  <div id="form" class="f-row">
    <div class="f-col s12 m12 l12">
      <h2>Sign up CMS</h2>
    </div>
    <div class="f-col s12 m6 l6">
      <!--firstname-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>First name *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="fname" name="name" type="text" placeholder="First name" onblur="fnameunFormalb()" oninput="fnameunFormal()">
        </div>
        <div id="fnunFormal"></div>
        <div id="fnunFormalb"></div>
      </div>
      <!--lastname-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Last name *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="lname" name="lname" type="text" placeholder="Last name" onblur="lnameunFormalb()" oninput="lnameunFormal()">
        </div>
        <div id="lnunFormal"></div>
        <div id="lnunFormalb"></div>
      </div>
      <!--username-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6 id="theofile">Username *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="nfsoc" name="uname" type="text" placeholder="Username" onblur="usrFsoc()" oninput="usrFsoc2()" onfocus="usrColor()">
        </div>
        <div id="usrunFormal"></div>
      </div>
      <!--email-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>E-mail *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="email" type="text" name="email" placeholder="E-mail" onblur="validateEmailb()" onfocus="validateEmail()">
        </div>
        <div id="emailunFormal"></div>
      </div>
      <!--password-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Password *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="password" name="password" type="password" placeholder="Password" oninput="psw()" onblur="pswb()" onchange="pswc()">
        </div>
        <div id="passunFormal"></div>
      </div>
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Repeat Password *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="rpassword" name="rpassword" type="password" placeholder="Repeat Password" oninput="rpsw()" onblur="rpswb()">
        </div>
        <div id="rpassunFormal"></div>
      </div>
      <!--other-->
      <div class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Role *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <select name="role">
            <option class="t">Admin</option>
            <option class="t">Author</option>
          </select>
        </div>
      </div>
    </div>
    <div class="f-col s12 m6 l6">
      <div class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Profile image</h6>
        </div>
        <div id="img" class="f-col s12 m6 l6">
          <label for="uploadphoto">Upload picture</label>
          <input type="file" name="uploadphoto" id="uploadphoto">
          <span id="fsoc" style="float:right;"></span>
        </div>
      </div>
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Website</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="website" name="website" type="text" placeholder="Website" onchange="webValid()">
        </div>
        <div id="webUrl"></div>
      </div>
      <div class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Details</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <textarea name="details" rows="5" cols="10" placeholder="BY MIND: Impossible is possible"></textarea>
        </div>
      </div>
      <div class="f-row">
        <div style="float:right;" class="f-col s12 m6 l4">
          <input id="sbmt" type="submit" value="Sign up">
        </div>
        <div id="success"></div>
      </div>
    </div>
  </div>
</form>

将e.preventdefault（）移到函数的顶部。然后您将在控制台中看到错误
“message”：“uncaught typeerror:e.unbind不是函数”
您还需要将括号从document.ready后移到document.ready前。它不是fsocietyapp函数的一部分
所以这是错误的：

e.unbind(); <<<<
      }
    });
  });
} <<<<<<<

也许你是说 $(this).unbind("submit") 但我不建议这样做，因为下一次单击将提交表单
也 fnvaluf 是未定义的 formURL 我想您应该像这样在submit中调用fsocietyapp（）：

function fsocietyApp() {
  /* other code */
} // the end bracket belongs HERE

$(document).ready(function() {
  $("#formid").on("submit", function(e) {
    e.preventDefault(); // belongs HERE in case of other errors further down
    if (fsocietyApp()) { // validate
      var formObj = $(this);
      var formURL = formObj.attr("action");

      if (window.FormData !== undefined) {
        var formData = new FormData(this);
        $.ajax({
          url: formURL,
          type: 'POST',
          data: formData,
          mimeType: "multipart/form-data",
          contentType: false,
          cache: false,
          processData: false,
          success: function(data, textStatus, jqXHR) {
            $("#multi-msg").html('<pre><code>' + data + '</code></pre>');
            $("#formid")[0].reset();
          },
          error: function(jqXHR, textStatus, errorThrown) {
            $("#multi-msg").html('<pre><code class="prettyprint">AJAX Request Failed<br/> textStatus=' + textStatus + ', errorThrown=' + errorThrown + '</code></pre>');
          }
        });
        //          e.unbind(); // <<<<<<< gave error
      }
    } // end if valid
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="formid" method="post" onsubmit="return fsocietyApp()" action="phppath/sucms.php" enctype="multipart/form-data">
  <div id="form" class="f-row">
    <div class="f-col s12 m12 l12">
      <h2>Sign up CMS</h2>
    </div>
    <div class="f-col s12 m6 l6">
      <!--firstname-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>First name *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="fname" name="name" type="text" placeholder="First name" onblur="fnameunFormalb()" oninput="fnameunFormal()">
        </div>
        <div id="fnunFormal"></div>
        <div id="fnunFormalb"></div>
      </div>
      <!--lastname-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Last name *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="lname" name="lname" type="text" placeholder="Last name" onblur="lnameunFormalb()" oninput="lnameunFormal()">
        </div>
        <div id="lnunFormal"></div>
        <div id="lnunFormalb"></div>
      </div>
      <!--username-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6 id="theofile">Username *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="nfsoc" name="uname" type="text" placeholder="Username" onblur="usrFsoc()" oninput="usrFsoc2()" onfocus="usrColor()">
        </div>
        <div id="usrunFormal"></div>
      </div>
      <!--email-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>E-mail *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="email" type="text" name="email" placeholder="E-mail" onblur="validateEmailb()" onfocus="validateEmail()">
        </div>
        <div id="emailunFormal"></div>
      </div>
      <!--password-->
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Password *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="password" name="password" type="password" placeholder="Password" oninput="psw()" onblur="pswb()" onchange="pswc()">
        </div>
        <div id="passunFormal"></div>
      </div>
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Repeat Password *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="rpassword" name="rpassword" type="password" placeholder="Repeat Password" oninput="rpsw()" onblur="rpswb()">
        </div>
        <div id="rpassunFormal"></div>
      </div>
      <!--other-->
      <div class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Role *</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <select name="role">
            <option class="t">Admin</option>
            <option class="t">Author</option>
          </select>
        </div>
      </div>
    </div>
    <div class="f-col s12 m6 l6">
      <div class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Profile image</h6>
        </div>
        <div id="img" class="f-col s12 m6 l6">
          <label for="uploadphoto">Upload picture</label>
          <input type="file" name="uploadphoto" id="uploadphoto">
          <span id="fsoc" style="float:right;"></span>
        </div>
      </div>
      <div id="rfname" class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Website</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <input id="website" name="website" type="text" placeholder="Website" onchange="webValid()">
        </div>
        <div id="webUrl"></div>
      </div>
      <div class="f-row">
        <div class="f-col s12 m6 l4">
          <h6>Details</h6>
        </div>
        <div class="f-col s12 m6 l8">
          <textarea name="details" rows="5" cols="10" placeholder="BY MIND: Impossible is possible"></textarea>
        </div>
      </div>
      <div class="f-row">
        <div style="float:right;" class="f-col s12 m6 l4">
          <input id="sbmt" type="submit" value="Sign up">
        </div>
        <div id="success"></div>
      </div>
    </div>
  </div>
</form>

ajax formdata附近的javascript表单验证

1条答案

相关问题

热门标签

最新问答