表格验证 - HTML和JavaScript?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (98)

我对编写表单验证相对较新,并且无法使用formValidation函数使页面实际返回false(如果用户输入错误的isbn长度,则不提交表单)。想知道我在这里失踪了什么。

无论isbn.length是什么,弹出警报并提交表单 - 但是,如果它是正确的长度,它会被添加到数据库并重新路由到主页。如果它不是正确的长度,它将被路由到“此页面不起作用localhost没有发送任何数据.ERR_EMPTY_RESPONSE”

使用Javascript:

//function to validate the form's ISBN number input and ensure it's between 10-14 digits.

function formValidation(){
    var isbn = document.forms["sellForm"]["isbn"];

        if (isbn.length >= 10 && isbn.length <= 14){
         return true;

     }
     else
     {
         alert("Please input a 10-14 digit ISBN number");
         isbn.focus();
         return false;

     }
 }

</script>

对应的HTML:

<form name="sellForm" method="POST" action="/create" role="form" onsubmit="formValidation()">
              <div class="form-group">
                <label for="role" >ISBN</label>
                <input type="number" size=14 class="form-control" name="isbn" id="role"  required
               placeholder="input the 10-14 digit ISBN number"/>
              </div>

              <div class="form-group">
                  <label for="age">Condition</label>
                                    <br>
   <input type="radio" name="book_condition" value="Very Used"> Very Used<br>
     <input type="radio" name="book_condition" value="Lightly Used"> Lightly Used<br>
     <input type="radio" name="book_condition" value="Like New"> Like New
                  </div>
              </div>

              <div class="form-group">
                <label>Price</label>
                <input type="number" class="form-control" name="price" required
                                placeholder="input whole dollar price">
              </div>

              <button type="submit" class="btn btn-primary btn-md" id="add-btn">
                                <span class="fa fa-fire"></span> Sell</button>

            </form>
提问于
用户回答回答于

您可能需要像这样检查isbn.value:

function formValidation(){
  var isbn = document.forms["sellForm"]["isbn"];

  if (isbn.value >= 10 && isbn.value <= 14) {
       return true;
  } else {
       alert("Please input a 10-12 digit ISBN number");
       isbn.focus();
       return false;
  }
}

然后根据需要添加逻辑。

用户回答回答于

您需要检查isbn输入字段值的长度,并在表单标记中,您需要formValidationonsubmit处理程序中获取函数的返回,如下所示:onsubmit="return formValidation()"

function formValidation(){
    var isbn = document.forms["sellForm"]["isbn"];
        // check for the input field value's length
        if (isbn.value.length >= 10 && isbn.value.length <= 14){
         return true;

     }
     else
     {
         alert("Please input a 10-12 digit ISBN number");
         isbn.focus();
         return false;

     }
 }

<form name="sellForm" method="POST" action="/create" role="form" onsubmit="return formValidation()">
              <div class="form-group">
                <label for="role" >ISBN</label>
                <input type="number" size=14 class="form-control" name="isbn" id="role"  required
               placeholder="input the 10-14 digit ISBN number"/>
              </div>

              <div class="form-group">
                  <label for="age">Condition</label>
                                    <br>
   <input type="radio" name="book_condition" value="Very Used"> Very Used<br>
     <input type="radio" name="book_condition" value="Lightly Used"> Lightly Used<br>
     <input type="radio" name="book_condition" value="Like New"> Like New
                  </div>
              </div>

              <div class="form-group">
                <label>Price</label>
                <input type="number" class="form-control" name="price" required
                                placeholder="input whole dollar price">
              </div>

              <button type="submit" class="btn btn-primary btn-md" id="add-btn">
                                <span class="fa fa-fire"></span> Sell</button>

            </form>

扫码关注云+社区

领取腾讯云代金券