AJAX 提交前的 JavaScript 验证

标签 javascript jquery ajax

我试图在允许我的 ajax 提交之前验证表单,但是我有两个问题。第一个问题是我不知道如何在提交前最好地进行验证(最专业的流程)。第二个问题是,是什么阻止了我目前使用的验证码?希望变得更有效率,因此欢迎所有意见。非常感谢。

 $('#form-reg').on('submit', function(){

     var bool = false;
     var name = document.getElementById('#name-reg');
     var email = document.getElementById('#email-reg');

     console.log(name);
     console.log(email);
     if(!/[^a-zA-Z]/.test(name)){
       bool = true;
     }
     else{
       bool = false;
     }
     if(bool == true){
        console.log(document.getElementById('#name-reg'));
        $('#form-reg').slideUp('slow');
        // serialize the form
        var formData = $(this).serialize();
        console.log(formData);
        $.ajax({
            type        : 'POST',
            url         : 'register.php',
            data        : formData,

            success: function() {
              alert("Success");
            },
             error: function(xhr) {
              alert("fail");
            }
        })
        .done(function (data) {
              document.getElementById('form-reg').reset();

        })
        .fail(function (error) {
            alert("POST failed");
        });
        //return false;
      }
      else {
        alert('try again');
      }
  });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript">

  <form id = "form-reg">
      <label id ="x" for="name">Name</label>
      <input id="name-reg" name="name"></br>
      <label id = "y" for="email">Email</label>
      <input id="email-reg" name="email"></br>
      <input type="submit" value="submit" id = "submit-reg">
    </form>

最佳答案

您的代码的问题是您必须停止表单提交,例如:

$('#form-reg').on('submit', function(e){
  e.preventDefault();

检查验证后,如果验证成功,则提交表单。

关于AJAX 提交前的 JavaScript 验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45963686/

相关文章:

javascript - 使用 AJAX/Javascript/jQuery 自动更新 HTML/PHP 表格以淡入新结果并淡出旧结果

jquery - 可以将复选框设置为只读而不禁用它吗?

javascript - Rails 4:如何使用AJAX更新索引页面

javascript - JSON 解析错误 : Unrecognized token '<' In angular

javascript - 从谷歌地图中删除自定义叠加层

javascript - 如何在mvc3中执行操作而不更改当前页面

javascript - 没有表格的文件上传

javascript - 在php中编码javascript数组?

JQuery + CSS - flex/弹跳滚动溢出 :auto

javascript - ASP.NET MVC : Ajax. Actionlink 不适用于参数