Question

我的表格看起来像这样。我想做的是，我想确保Minimum Age＆lt; Maximum Age 和Minimum Skill Level＆lt; Maximum Skill Level

什么是对输入施加约束的方法？

HTML

{% extends "template.html" %}
{% set active_page = "events" %}
{% block content %}
    <div class="jumbo">
        <h2>EVENTS PAGE</h2>
        <br/>
        <p>Click <a href="/welcome">here</a> to go to the welcome page</p>
    </div>

    <form action = "/events_success" method=post>
      Event Name:<br>
      <input type="text" name="eventname" required="">
      <br>
      Sports:<br>
      <select name="sports">
       {% for item in sports_data %}
         <option value="{{ item[0] }}">{{ item[0] }}</option>
       {% endfor %}
     </select>

      <br>

     Location:<br>
      <select name="location">
       {% for item in loc_data %}
         <option value="{{ item[0] }}">{{ item[0] }}</option>
       {% endfor %}
     </select>

      <br>
      Time:<br>
        <input type="datetime-local" name="time" required>

      <br>
      Number of Players:<br>
      <input type="text" name="numplayers" required>
      <br>
      Minimum Age:<br>
      <input type="text" name="minage" required>
      <br>
      Maximum Age:<br>
      <input type="text" name="maxage" required>
      <br>
      Minimum Skill Level:<br>
      <input type = "radio" name = "minskill" value = "1" required> 1
      <input type = "radio" name = "minskill" value = "2"> 2
      <input type = "radio" name = "minskill" value = "3"> 3
      <input type = "radio" name = "minskill" value = "4"> 4
      <input type = "radio" name = "minskill" value = "5"> 5
      <br>
      Maximum Skill Level:<br>
      <input type = "radio" name = "maxskill" value = "1" required> 1
      <input type = "radio" name = "maxskill" value = "2"> 2
      <input type = "radio" name = "maxskill" value = "3"> 3
      <input type = "radio" name = "maxskill" value = "4"> 4
      <input type = "radio" name = "maxskill" value = "5"> 5
      <br>
      <br>
      Creator: {{ session['username'] }}<br>
      <input type="submit" value="Send">
    </form>


{% endblock %}

Answer 1

如果这些字段无法满足该条件，您可以尝试使用某些javaScript来阻止表单提交。请检查我的演示。

**注意：它只是一个演示。这就是为什么没有进行任何身份验证的原因。

＆＃13;

window.onload = function() {
    let submit = document.querySelector("#submit");
    
    function validateAge(minAge, maxAge) {
        let min = parseInt(minAge, 10);
        let max = parseInt(maxAge, 10);
        return min >= max ?  false :  true;
    }
    function validateSkill(minSkill, maxSkill) {
        let min = parseInt(minSkill, 10);
        let max = parseInt(maxSkill, 10);
        return min >= max ?  false :  true;
    }
    
    submit.onclick = function() {
        let minAge = document.querySelector("#minage").value;
        let maxAge = document.querySelector("#maxage").value;
        let radios = document.querySelectorAll('input[type="radio"]:checked');
        let minSkill = radios[0].value;
        let maxSkill = radios[1].value;
    
        if(validateAge(minAge, maxAge) && validateSkill(minSkill, maxSkill))
            return  true;
        else {
            alert("Invalid data");
            return false;
        }
    }
    
}

＆＃13;

    <form id="myForm" action = "/events_success" method=post >

      Minimum Age:<br>
      <input type="text" name="minage" id="minage" required>
      <br>
      Maximum Age:<br>
      <input type="text" name="maxage" id="maxage"  required>
      <br>
       Minimum Skill Level:<br>
      <input type = "radio" name = "minskill" value = "1" required> 1
      <input type = "radio" name = "minskill" value = "2"> 2
      <input type = "radio" name = "minskill" value = "3"> 3
      <input type = "radio" name = "minskill" value = "4"> 4
      <input type = "radio" name = "minskill" value = "5"> 5
      <br>
      Maximum Skill Level:<br>
      <input type = "radio" name = "maxskill" value = "1" required> 1
      <input type = "radio" name = "maxskill" value = "2"> 2
      <input type = "radio" name = "maxskill" value = "3"> 3
      <input type = "radio" name = "maxskill" value = "4"> 4
      <input type = "radio" name = "maxskill" value = "5"> 5
      <br>
      <br>
  
      <input type="submit" value="Send" id="submit">
    </form>

＆＃13;

Answer 2

您可以使用一些常见的PHP验证技术。这些更有益，因为注射和其他攻击的风险较小。

PHP：

  if (empty($_POST["code"])) {
    $errcode = "Verify that you're human";
  } else {
    $code = test_input($_POST["code"]);
    if (!$_POST['code'] < $string) {
      $errcode = "Make code greater than string";
    }
  }

HTML：

<p><label for="code">Scrambled code:  </label><input type="text" name="code" id="code" /><span class="error">  * <?php echo $errcode;?></span></p>

如何在HTML表单输入上设置约束？

2 个答案: