Question

我有一个Web应用程序，它在文本框中收集一些数据，然后将它们发送到运行烧瓶的python脚本

我找到了两种提交表单的方法。

我的按钮设法收集数据并将其发送到python并从python中退出答案但不验证输入

我的输入标签设法验证文本按钮但清除表单，并且无法将数据发送到python脚本进行处理。

我想做两个按钮的方面，我想验证，发送数据到python并退出数据。

如何将输入提交和按钮功能组合成一个可点击和提交的可点击项目？

任何有用的帮助

{% extends "layout.html" %}
{% block body %}
<script type="text/javascript">


  $(function() {
    var submit_form = function(e) {


      $.getJSON($SCRIPT_ROOT + '/add_numbers', {
        nm_height: $('input[name="nm_height"]').val(),
        mn_material: $('input[name="mn_material"]').val(),
        lc_height: $('input[name="lc_height"]').val(),
        li6_enrichment_fraction: $('input[name="li6_enrichment_fraction"]').val()

      }, function(data) {
        $('#result').text(data.result);
        $('input[name=nm_height]').focus().select();
      });


      return false;
    };
    $('#calculate').bind('click', submit_form);
    //$("#myform").bind('ajax:complete', submit_form);
    $('input[type=text]').bind('keydown', function(e) {
      if (e.keyCode == 13) {
        submit_form(e);
      }
    });
    $('input[name=a]').focus();
  });
</script>


<p>
    <form  name="myform" id="myform" >
        <!--<form action="#" method='POST GET'>-->

  <p>Height of neutron multiplier pebble bed <input type="number" size="10" name="nm_height" min="10" max="140"  step="any"  required placeholder='10 to 120'> mm </p>
  <p>Neutron multiplier material <input type="text" size="10" name="mn_material" required placeholder='Be or Be12Ti'> Be or Be12Ti</p>
  <p>Height of lithium ceramic pebble bed  <input type="number" size="10"  name="lc_height"  min="10" max="140"  step="any" required placeholder='1 to 60'> mm </p>
  <p>Lithium 6 enrichment <input type="number" size="10" name="li6_enrichment_fraction"  min="0" max="100"  step="any" required placeholder='60 to 100'> %</p>


   <button id="calculate" type="submit">predict TBR</button>


   <input id="calculate" type="submit"></input>

  </form>

  TBR =<span id="result">?</span>
  <br>
  The TBR is quoted with a 95% <a href='http://www.stat.yale.edu/Courses/1997-98/101/confint.htm'> confidence interval </a>
<!--<p><a href=# id="calculate">calculate server side</a>-->
{% endblock %}

Answer 1

我处于相同的情况，因此我决定在验证中使用正则表达式或仅使用javascript。正则表达式功能更强大，速度更快，但需要时间，而javascript则更容易，更慢。所以这是一个交易。

Answer 2

让后端使用WTFForms之类的方法来进行验证。然后，您只需要担心将数据提交到API端点并处理返回的响应。

避免严格在前端进行任何验证，因为与后端验证相比，它不安全并且更容易被欺骗。

{% extends "layout.html" %}

{% block body %}
<script type="text/javascript">
    $('#myform').on('submit', function() {
        var res = $.ajax({
            url: '/add-numbers'
            data: $(this).serialize(),
            ...
        });

        res.done(function(data) {
            // get successful calculation back...
        });

        res.fail(function() {
            // handle validation or calculation errors...
        });
    });
</script>
{% endblock %

html表单验证结合flask和python

2 个答案: