javascript - API Fetch ES6 中的注册函数

Question

我有一个带有注册功能的弹出窗口。问题是，尽管字段尚未完全填写或存在错误，但在我单击注册按钮后它会关闭弹出窗口。我已经将“required”放入输入元素中，但它什么也没做。我的代码有什么问题吗？我试图从网站获取 api 注册。

function registerUser(event){

    console.log(event)

    event.preventDefault();

 console.log(document.forms[0].checkValidity());
    fetch('http://sample_website.com/api/register', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            given_name: document.getElementById("given_name").value,
            last_name: document.getElementById("last_name").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value,
            password_confirmation: document.getElementById("confirm_password").value
        })
    })
    .then(data => data.json())
    .then(data =>  { 
        console.log(data);
        if(data.response){
            alert("Successfully Registered"); 
        } else{
            alert("Sorry, email has already been taken.");
        } 
    })
    .catch((err) => {
         alert ("This is a warning message!");
        console.error(err);
    })

   
}

 window.onload = function() {
  document.forms[0]
  .addEventListener("submit", registerUser)
}

<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form>
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-info" id="myModalLabel">Register Now</h4>
                </div>
                <div class="modal-body">    
                    <div class = "form-group">
                        <label>Given Name</label>
                        <input type="text" id="given_name" name="given_name" class = "form-control" required/>
                    </div>
                    <div class = "form-group">
                        <label>Last Name</label>
                        <input type="text" id="last_name" name="lname" class = "form-control" required/>
                    </div>
                    <div class = "form-group">
                        <label>Email</label>
                        <input type="text" id="email" name="email" class = "form-control" required/>
                    </div>
                    <div class = "form-group">
                        <label>Password</label>
                        <input type="password" id="password" name="password" class = "form-control" required/>
                    </div>
                    <div class = "form-group">
                        <label>Confirm Password</label> 
                        <input type="password" id="confirm_password" name="c_password" class = "form-control" required/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" ata-dismiss = "modal" ><i class="fa fa-user-plus" aria-hidden="true"></i> Register</button>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

fetch()和 JavaScript 通常与问题中描述的问题无关。

问题是在问题 <form> 的 HTML 中已验证。

因此 <form>提交于 click在<button>元素。

您已经设置了 value属性为非空的有效字符串。没有 pattern <input> 处的属性要设置的元素 RegExp有效模式到现有值以外的值 .value属性(property)。

替换 placeholder对于 value属性或包含 pattern反射(reflect)该默认值的属性 value应该无效。

<script>
function registerUser() {
  console.log(document.forms[0].checkValidity())
}
</script>

<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form>
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title text-info" id="myModalLabel">Register Now</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>Given Name</label>
            <input type="text" id="given_name" name="given_name" placeholder="Joseph" class="form-control" required/>
          </div>
          <div class="form-group">
            <label>Last Name</label>
            <input type="text" id="last_name" name="lname" placeholder="Book" class="form-control" required/>
          </div>
          <div class="form-group">
            <label>Email</label>
            <input type="text" id="email" name="email" placeholder="123@gmail.com" class="form-control" required/>
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="password" id="password" name="password" placeholder="123" class="form-control"  required/>
          </div>
          <div class="form-group">
            <label>Confirm Password</label>
            <input type="password" id="confirm_password" name="c_password" placeholder="123" class="form-control" required/>
          </div>
        </div>
        <div class="modal-footer">
          <button onclick="registerUser();" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-user-plus" aria-hidden="true"></i> Register</button>
        </div>
      </form>
    </div>
  </div>