如何使用Flask在客戶端驗證表單？

Question

我正在嘗試編寫一個簡單的Flask API來讀取字段name,email,phone,message與POST，驗證它們，並根據驗證的輸出返回true或false - 以下JS腳本。我怎樣才能做到這一點？

@app.route('/email' , methods = ['POST']) 
def email(): 
    name = request.form["name"] 
    phone = request.form["phone"] 
    email = request.form["email"] 
    message = request.form["message"] 
    return json.dumps({'status' : 'OK' , 'name' : name , 'phone' : phone , 'email' : email , 'message' : message}); 

。

$(function() { 

    $("input,textarea").jqBootstrapValidation({ 
     preventSubmit: true, 
     submitError: function($form, event, errors) { 
      // additional error messages or events 
     }, 
     submitSuccess: function($form, event) { 
      // event.preventDefault(); // prevent default submit behaviour 
      // get values from FORM 
      var name = $("input#name").val(); 
      var email = $("input#email").val(); 
      var phone = $("input#phone").val(); 
      var message = $("textarea#message").val(); 
      var firstName = name; // For Success/Failure Message 
      // Check for white space in name for Success/Fail message 
      if (firstName.indexOf(' ') >= 0) { 
       firstName = name.split(' ').slice(0, -1).join(' '); 
      } 
      $.ajax({ 
       url: "/email", 
       data: $('form').serialize(), 
       type: "POST", 
       cache: false, 
       success: function() { 
        // Success message 
        $('#success').html("<div class='alert alert-success'>"); 
        $('#success > .alert-success').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('#success > .alert-success') 
         .append("<strong>Your message has been sent. </strong>"); 
        $('#success > .alert-success') 
         .append('</div>'); 

        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
       error: function() { 
        // Fail message 
        $('#success').html("<div class='alert alert-danger'>"); 
        $('#success > .alert-danger').html("<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;") 
         .append("</button>"); 
        $('#success > .alert-danger').append("<strong>Sorry " + firstName + ", it seems that my mail server is not responding. Please try again later!"); 
        $('#success > .alert-danger').append('</div>'); 
        //clear all fields 
        $('#contactForm').trigger("reset"); 
       }, 
      }) 
     }, 
     filter: function() { 
      return $(this).is(":visible"); 
     }, 
    }); 

    $("a[data-toggle=\"tab\"]").click(function(e) { 
     e.preventDefault(); 
     $(this).tab("show"); 
    }); 
}); 


/*When clicking on Full hide fail/success boxes */ 
$('#name').focus(function() { 
    $('#success').html(''); 
}); 

Answer 1

客戶端驗證數據通常是個壞主意。也許某種預驗證是可以的，但無論如何，最終的決定都應該在服務器端進行。

對於表單的服務器端驗證，您可以檢查WTForms庫，該庫包含一些預定義的驗證器類。