Django形式的前端字母数字验证

时间:2019-05-21 03:01:42

标签: python ajax django forms validation

我已经在django中创建了一个表单,我需要确保只使用一个字母数字字符(种子)的单个字段。我从这里获取了一些我认为可能在后端工作的代码,但我也想实现该客户端,以免首先输入并提交这些字符来避免错误。

forms.py

from django import forms
from django.core.validators import RegexValidator


THEME_CHOICES = [
    ("original", "Original")
]

MAX_SIZE = [
    (140, "Huge"),
    (80, "Large"),
    (40, "Medium"),
    (20, "Small"),
    (10, "Tiny"),
    (5, "Mini")
]

alphanumeric = RegexValidator(r'^[0-9a-zA-Z]*$', 'Only alphanumeric characters are allowed.')


class DungenForm(forms.Form):
    seed = forms.CharField(required=False, max_length=12, validators=[alphanumeric], help_text="Leave blank for a random dungeon.")
    theme = forms.ChoiceField(required=True, choices=THEME_CHOICES)
    max_size = forms.ChoiceField(required=True, choices=MAX_SIZE, initial=40)

max_length在浏览器中可以正常工作,并在12点停止,但是RegexValidator似乎在那没做任何事情。

html

...
                <div class="row">
                    <div class="col-9" id="img-container"></div>
                    <div class="col-3">
                        {% bootstrap_field form.seed %}
                        {% bootstrap_field form.theme %}
                        {% bootstrap_field form.max_size %}
                        <button type="submit" class="btn btn-primary" id="generate">Generate</button>
                        <div id="img-download"></div>
                        <div id="tile-size" class="p-0 m-0"></div>
                        <div id="file-size" class="p-0 m-0"></div>
                    </div>
                </div>
...

js

$("#generate").click(function () {

    let button = $(this);
    button.attr("disabled", true);

    let data = {
    "seed": $("#{{ form.seed.auto_id }}").val(),
    "theme": $("#{{ form.theme.auto_id }}").val(),
    "max_size": $("#{{ form.max_size.auto_id }}").val(),

    };


    $.ajax({
    type: "POST",
    url: "{% url 'api_dungen' %}",
    data: data,
    success: function (response) {
    let img_html = '<img src="'+response.image_url+'" class="d-inline-block align-top img-fluid" height="900"'+
    'width="900"/> <br/> <br/>';
    let button_html = '<br/>'+
    '<a class="btn btn-secondary" href="'+response.image_url+'" role="button" download>Download</a>';

    let tile_size_html = '<p class="text-muted p-0 m-0">Tiles:<i> '+response.max_tile_size+'</i></p>'
    let file_size_html = '<p class="text-muted p-0 m-0">File Size:<i> '+response.file_size+'</i></p>'

    $("#img-container").html(img_html);
    $("#img-download").html(button_html);
    $("#tile-size").html(tile_size_html);
    $("#file-size").html(file_size_html);
    button.attr("disabled", false)

    },
    error: function(response){
    console.log(response)
    },
    dataType: "JSON"
    });
    })

我找到了Django-parsley的搜索方法,但无法使其正常工作,我不知道这是否是最好的方法。从理论上讲,它可以使用remote validation与Ajax一起使用,但是我找不到如何编码字母数字验证器的方法,尽管那可能只是我,因为我对此不太了解,但不是因为缺乏尝试。 / p>

谢谢。

0 个答案:

没有答案