Question

我已经在几个地方联系过，而且帮助很好但是没有设法让它对我起作用。

希望你们能在这里帮助我。

我在Flask应用程序的模板页面中使用JS。我正在使用欧芹验证来验证Web表单。我还创建了一个自定义验证器，它应该使用axios与后端进行ajax调用，以确定是否已经注册了电子邮件地址。

My Flask Backend将一个布尔字符串返回到我的html页面。所有这些都是正确的。我正在恢复正确的价值。但是当我在axios函数中退出我的“.then”函数时，Parsley验证器无法工作/响应。

如果我删除了axios POST调用。只是简单地说“return false”或“return true”这个功能起作用。验证消息将返回到屏幕。

所以将返回语句放在我的.axios .then函数中似乎存在问题？

有人可以看看我在这里做错了吗？我不能为我的生活找出原因，为什么它不起作用。

感谢。

添

我在这里已经包含了FAILING JS代码。

<script type="text/javascript">

window.Parsley.addValidator('existingEmail', {
    validateString: function(value) {

        // Performing a POST request
        var promise = axios.post('/api/v1.0/existingEmailCheck', {email : value})
          .then(function(response){
            var result = (response.data.toLowerCase() === "true");
            console.log(result)
            return result
          });  

         console.log(promise)

         return promise

    },
    messages: {
        en: "This email address has already been registered.",
    }

});

</script>

我还包含了一个稍微修改过的（没有axios调用）代码。

    <script type="text/javascript">

    window.Parsley.addValidator('existingEmail', {
        validateString: function(value) {

            var string = "false" //This Simulates the Incoming Data.

            var result = (string.toLowerCase() === "true");
                console.log(result)
                return result   //Always returns false (due to hard coding)
                //However this means that it triggers the error message and validation fails
                //When you change the string to "true" it works as expected and validates
        },
        messages: {
            en: "This email address has already been registered.",
        }

    });

</script>

该示例按预期工作。这让我相信第一个代码示例中的错误介于调用和返回False或True的IF ELSE之间

人们可以给我的任何帮助都会很棒！

Answer 1

我认为你需要返回一个jQuery promise而不是axios返回（本机保证？）。

FWIW，看起来你可以使用内置的remote验证器。

Answer 2

我自己试图使用Axios（想要取消jQuery和它的庞大的库）。结束创建AsyncValidator（在幕后使用Ajax）。

在您的HTML中导入jQuery和Parsley

<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/parsley.min.js"></script>

定义您的DOM元素以支持远程验证器

<input id="id" class="form-control" name="id" type="text" data-parsley-remote data-parsley-remote-validator='checkExists' placeholder="Username / ID" data-parsley-checkExists="" data-parsley-minlength="5" data-parsley-required-message="Please enter username / id" required>

在index.js文件中，添加异步验证器。

 Parsley.addAsyncValidator('checkExists', function (xhr) {
    return false === xhr.responseJSON;
  }, '/data-management/verify-data?filter=signup');

生成的Ajax请求是/data-management/verify-data?filter=signup&id=value值，它是输入字段的值。

最终为我工作。如果您需要帮助，请告诉我。

带有JS Promise的Parsley自定义验证器

2 个答案: