使用 AJAX 時 wtforms 驗證不起作用

Question

我的頁面上有 2 個表格 - 登錄表格和注冊表單。 現在我想使用 AJAX 來驗證這些表單，這樣我就可以在不刷新頁面的情況下查看輸入錯誤。 我試圖將所有 AJAX 內容添加到我已有的表單中，但現在表單驗證似乎不起作用。

路線.py

@users.route('/login', methods=['GET', 'POST'])
def login():
    loginForm = LoginForm()
    registerForm = RegisterForm()

    if request.method == 'POST':
        if registerForm.validate():
            return'wow it works'
        return 'something is wrong'

    return render_template("login.html", loginForm=loginForm, registerForm=registerForm)

PS我也想知道在發送POST請求時如何檢查要驗證的表單？ 現在我只是想弄清楚如何解決這個問題，所以我只使用注冊表。 但是，當我同時擁有如何驗證一種形式並忽略另一種形式時？

登錄.html

 const signUpButton = document.getElementById("signUp"); const signInButton = document.getElementById("signIn"); const container = document.getElementById("container"); signUpButton.addEventListener('click', () => { container.classList.add("right-panel-active"); }); signInButton.addEventListener('click', () => { container.classList.remove("right-panel-active"); }); const fields = { username: { input: document.getElementById('username'), error: document.getElementById('username-error') }, email: { input: document.getElementById('email'), error: document.getElementById('email-error') }, password: { input: document.getElementById('password'), error: document.getElementById('password-error') }, confirm_password: { input: document.getElementById('confirm_password'), error: document.getElementById('confirm-password-error') } } var regForm = document.getElementById('register-form'); regForm.addEventListener('submit', async (e) => { e.preventDefault(); const response = await fetch('/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username: fields.username.input.value, email: fields.email.input.value, password: fields.password.input.value, confirm_password: fields.confirm_password.input.value }) }); if (response.ok) { alert('yes'); console.log(response); } else { const errors = await response.json(); Object.key(errors).forEach((key) => { fields[key].input.classList.add('input-invalid'); fields[key].error.innerHTML = errors[key][0]; }); } });

 <div class="form-container sign-up-container"> <form id="register-form" action="" method="POST"> {{ registerForm.hidden_tag() }} <h1>Create an account</h1> <fieldset class="uk-fieldset"> <div class="uk-margin form-group"> {% if registerForm.username.errors %} {{ registerForm.username(class="uk-input input-invalid") }} <div class="input-erros" id="username-error"> {% for error in registerForm.username.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ registerForm.username(class="uk-input") }} {% endif %} </div> <div class="uk-margin form-group" id="email-error"> {% if registerForm.email.errors %} {{ registerForm.email(class="uk-input input-invalid") }} <div class="input-erros"> {% for error in registerForm.email.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ registerForm.email(class="uk-input") }} {% endif %} </div> <div class="uk-margin form-group" id="password-error"> {% if registerForm.password.errors %} {{ registerForm.password(class="uk-input input-invalid") }} <div class="input-erros"> {% for error in registerForm.password.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ registerForm.password(class="uk-input") }} {% endif %} </div> <div class="uk-margin form-group" id="confirm-password-error"> {% if registerForm.confirm_password.errors %} {{ registerForm.confirm_password(class="uk-input input-invalid") }} <div class="input-errors"> {% for error in registerForm.confirm_password.errors %} <span>{{ error }}</span> {% endfor %} </div> {% else %} {{ registerForm.confirm_password(class="uk-input") }} {% endif %} </div> <div class="uk-margin form-group"> </div> </fieldset> <button class="form-button">Create an account</button> </form> </div> <div class="form-container sign-in-container"> <form action="#"> <h1>Sign In</h1> <fieldset class="uk-fieldset"> <div class="uk-margin"> {{ loginForm.usernameLogin(class="uk-input") }} </div> <div class="uk-margin"> {{ loginForm.passwordLogin(class="uk-input") }} </div> <div class="uk-margin"> {{ loginForm.submit(class="form-button") }} </div> </fieldset> </form> </div> <div class="overlay-container"> <div class="overlay"> <div class="overlay-panel overlay-left"> <h1>Don't have an account yet?</h1> <!-- <p>just sign in</p> --> <button class="ghost form-button" id="signUp">Create an account</button> </div> <div class="overlay-panel overlay-right"> <h1>Already have an account?</h1> <!-- <p>become a part of the community</p> --> <button class="ghost form-button" id="signIn">Sign In</button> </div> </div> </div>

表格.py

class RegisterForm(FlaskForm):
    username = StringField('username',
                            validators=[
                                DataRequired("username is required"), 
                                Length(min=5, 
                                        max=15, 
                                        message="must be between 5 and 15 characters")
                            ], 
                            render_kw={"placeholder": "username"})

    email = StringField('e-mail',
                            validators=[
                                DataRequired("e-mail is required"), 
                                Email(message="probably not e-mail")
                            ],
                            render_kw={"placeholder": "e-mail"})

    password = PasswordField('password',
                                validators=[DataRequired("password is required")], 
                                render_kw={"placeholder": "password"})

    confirm_password = PasswordField('confirm password',
                                        validators=[
                                            DataRequired("confirm password"), 
                                            EqualTo('password')
                                        ], 
                                        render_kw={"placeholder": "confirm password"})


    def validate_username(self, username):
        pass

    def validate_email(self, email):
        pass

    def validate_password(self, password):
        pswd = password.data
        flag = 0

        while True:
            if (len(pswd)<8):
                flag = -1
                break

            elif not re.search("[a-z]", pswd):
                flag = -1
                break

            elif not re.search("[A-Z]", pswd):
                flag = -1
                break

            elif not re.search("[0-9]", pswd):
                flag = -1
                break

            else:
                flag = 0
                break

        if flag == -1:
            raise ValidationError('the password is too simple')

當我提交注冊表時，似乎只有 DataRequired 驗證器有效。 因為我可以在電子郵件和密碼中輸入任何內容，而且我仍然收到“是”警報，就像回復沒問題一樣。

Answer 1

使用 WTForms 驗證 JSON 請求與處理普通的 urlencoded 表單請求略有不同。

這是使用問題中的RegisterForm的簡單示例。

# imports here
...
import wtforms_json

# Initialise wtforms_json
wtforms_json.init()

app = Flask(__name__) 
app.config['SECRET_KEY'] = b'secret'  


@app.route('/login', methods=['POST'])  
def login():

    # Get the JSON data from the request.
    formdata = request.get_json()
    # Create the form using the from_json constructor
    registerForm = RegisterForm.from_json(formdata=formdata)
    # Return a dict, which will automatically be serialised as JSON.
    if registerForm.validate_on_submit():
        return {'result': 'success'}
    return registerForm.errors 

app.run()

顯着特點：

• 使用wtforms_json包在 wtforms 表單中啟用 JSON 和ling。
  • 必須調用wtforms_json.init()將 JSON 功能添加到Form類
• 路由處理程序在表單驗證后返回 dicts； Flask 會自動將這些轉換為 JSON 響應。 我發現最好在呈現整個 HTML 頁面的 GET 路由處理程序中呈現表單，但當僅傳輸 JSON 序列化數據時，使用單獨的處理程序來處理來自 javascript 的請求。

如果將此數據發送到應用程序，則會按預期進行錯誤驗證：

$ cat register.json 
{
    "username": "Tharg",
    "email": "Banana",
    "password": "red",
    "confirm_password": "blue",
    "csrf_token": "secret"
}
$ curl -X POST -H "Content-Type: application/json" -d @register.json http://localhost:5000/login 
{"confirm_password":["Field must be equal to password."],"csrf_token":["The CSRF token is missing."],"email":["probably not e-mail"],"password":["the password is too simple"]}