javascript - 在使用 POST 发送之前使用 Javascript 验证表单输入

Question

我正在尝试使用 javascript 验证表单中的一些输入，然后再将其通过 POST 发送到 PHP 控制器。

JS 代码如下所示，验证手机号、邮箱和密码：

  function registerUser(){
        // Validate Email
        event.preventDefault();
        function validateEmail(email) {
          var re = /^(([^<>()[\]\\.,;:\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,}))$/;
          return re.test(email);
        }
        function validate() 
        {
          var email = document.getElementById("emailReg").val();
          if (validateEmail(email)) 
          {
            var celular = document.getElementById("cellReg").val();
            if(celular.lenght >= 10 && /[0-9]/.test(celular))
            {
              var pass = document.getElementById("passwordReg").val();
              if(pass.length >= 6 && /[a-zA-Z]/.test(pass))
              {
                alert("correct data");
                document.forms['registerForm'].submit(); 
              }
              else
              {
                // document.forms['registroForm'].submit(); 
                event.preventDefault();
                alert("password need to has at leas 6 characters and one uppercase");

              }
            }
            else
            {
              event.preventDefault();
              alert("Phone number must not have letters");
            }
          } 
          else 
          {
            event.preventDefault();
            alert("Incorrect e-mail");
          }
            return false;
        }
  } 

这是表格：

<form class="form row" method="POST" name="registerForm">

  <input type="email" class="form-reg" name="emailReg" id="emailReg" placeholder="[e-mail]" style="width:140px;" required>

  <input type="text" class="formulario-registro" name="cellReg" id="cellReg" placeholder="cellphone number" style="width: 130px;" required>

  <input type="password" class="formulario-registro" name="passwordRegistro" id="passwordRegistro" placeholder="contraseña"  style="width: 140px;" required>

  <button type="button" class="btn btn-round btn-qubit title" onclick="registroUser();">Registrarme</button>

</form>

我必须检查长度，如果密码至少有一个大写字母，手机号码是否只有数字和至少 10 个字符，如果我在输入标签中写入type="number"属性，它将显示为 up和我不想显示的向下箭头，我可以将条件放在我的 php 中，但这样，当我提交表单时，表单将被删除，这就是我不想做的事情。

标签： javascriptjqueryhtml

Answer 1

我在提交表单时应用函数......当它提交下面的 JS 代码时，验证条件是否为真，然后将其发送到 php 控制器。

  $(document).ready(function(){
    $(".registerForm").on('submit', function(event)
    {
      var validate = validate();
      if(validate === "success")
      {
        console.log("success");
        document.forms['registerForm'].submit();
      }
      else{
        event.preventDefault();
      }
    });
    // validate password //
    function validate() 
    {
      var email = $("#emailRegister").val();
      if (validateEmail(email)) 
      {
        var cell = $("#cellRegister").val();
        if(cell.length === 10)
        {
          var pass = $("#passwordRegister").val();
          if(pass.length >= 6 && /[A-Z]/.test(pass))
          {
            console.log("correct data");
            return "success";
          }
          else
          {
            alert("password must have a lenght of 6 digits and at least one capital letter");
            return "false";
          }
        }
        else
        {
          alert("cellphone must be minimum a 10 digits number");
          return "false";
        }
      } 
      else 
      {
        alert("incorrect e/mail adress");
        return "false";
      }
    }

    // Validate Email
    function validateEmail(email) {
      var re = /^(([^<>()[\]\\.,;:\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,}))$/;
      return re.test(email);
    }

  });