如何显示Django表单Textarea (models.TextField)的实时文本分析?

Question

好的，所以我有一个模型类Recipe和一个基于Recipe (via forms.ModelForm)的表单类AddRecipeForm。

表单显示在我的html模板和工作，但我想实现一种特殊类型的表单验证。基本上，当用户输入他/她的成分/方向时，我想在一些大的文本输入字段上做一些文本处理。

我有代码，找出所有的数量(数字)在成分文本是，并识别和分类所有单位(例如。"磅。'， 'gr'等等)。-->我很想能够基本上有一个文本框右边的形式在add_recipe.html，执行此文本处理(通过高亮，粗体等)在实时。

然而，我真的不知道该怎么做。我一直在阅读关于通过AJAX, jquery， 'django通道'，或者可能只是django的ModelForm.clean()方法做实时表单验证，但我不确定哪一个是最好的或从哪里开始。任何指示/建议都很棒!

这是我的(简化)代码:

models.py

class Recipe(models.Model):
    recipe_name = models.CharField(max_length=128, default='')
    description = models.CharField(max_length=1024)
    ingredients_text = models.TextField(max_length=2048*2)
    instructions_text = models.TextField(max_length=2048*4)

forms.py

class AddRecipeForm(forms.ModelForm):
    class Meta:
        model = Recipe
        fields = '__all__'

views.py

def add_recipe(request):
    if request.method == "POST":
        add_recipe_form = AddRecipeForm(request.POST)
        if add_recipe_form.is_valid():
            recipe = add_recipe_form.save()
            recipe.save()
            return HttpResponseRedirect('/recipes/detail/{}/'.format(recipe.id))
        else:
            return HttpResponse('Invalid values :( Try again?')
    else:
        add_recipe_form = AddRecipeForm()
    context = {
        'add_recipe_form': add_recipe_form,
    }
    return render(request, 'home/add_recipe.html', context)

home/templates/home/add_recipe.py (html template)

旁注:我正在使用materialize框架，所以我用一个小助手来做表单，这样CSS就不会与django冲突-如果需要的话，我可以停止使用它…

{% extends "home/index.html" %}
{% block content %}
{% load materialize %}
    <h2> Add a Recipe </h2>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
    <div class="row">
        <p>{{add_recipe_form.ingredients_text|as_material:"s12 m6"}}</p>
        <div class="col s12 m6 textbox">  TODO (realtime validation textbox)  </div>
    </div>
    <div class="row">
        <p>{{add_recipe_form.instructions_text|as_material:"s12 m6"}}</p>
        <div class="col s12 m6 textbox"> TODO (realtime validation textbox) </div>
    </div>
        <input type="submit" value="Submit" class="waves-effect waves-light btn"/>
    </form>
{% endblock %}

Answer 1

不要使用Django的Form类，也不要担心Django -channels。您只需要设置一个简单的API，它接受文本字段中的任何内容的JSON，并返回处理后的文本的结果。JavaScript将负责通过AJAX调用API，并对响应进行处理。

这不是100%清楚你在做什么处理的文本，但如果你用"2 1/2"替换单词"两个半"，我可以看到服务器响应的关键值对{"两个半":"2 1/2"}，并允许JavaScript查找和替换该文本。