Фронтальная буквенно-цифровая проверка в форме Django - PullRequest
Новая
       17

Фронтальная буквенно-цифровая проверка в форме Django

0 голосов
/ 21 мая 2019

Я создал форму в 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"
    });
    })

В поисках способа сделать это я нашел Джанго-петрушка , но не смог заставить его работать должным образом, и я не знаю, является ли это лучшим способом сделать это. Теоретически он работает с Ajax, используя удаленную проверку , однако я не смог найти, как закодировать буквенно-цифровой валидатор, хотя это может быть только я, так как я не слишком разбираюсь в этом вопросе, но не из-за отсутствия пробовать.

Спасибо.

...