Question

这里是 Django 和 Python 的新手，正在构建我的第一个项目。我正在制作一个用于注册新用户的表格，并且我在 forms.py 文件中控制我的字段

class UserRegisterForm(forms.ModelForm):

password1 = forms.CharField(
    label='Contraseña',
    required=True,
    widget=forms.PasswordInput(
        attrs={
            # 'placeholder': 'Contraseña',
            'class': 'input-group-field',
            'oninvalid': "this.setCustomValidity('Ingrese una contraseña')",
            'oninput': "setCustomValidity('')"
        }
    )
)
password2 = forms.CharField(
    label='Contraseña',
    required=True,
    widget=forms.PasswordInput(
        attrs={
            # 'placeholder': 'Repetir Contraseña',
            'class': 'input-group-field',
            'oninvalid': "this.setCustomValidity('Repita la contraseña')",
            'oninput': "setCustomValidity('')"
        }
    )
)

class Meta:
    """Meta definition for Userform."""

    model = User
    fields = (
        'user_name',
        'full_name',
        'phone',
        'email',
        'role',
        'gender',
        'date_birth',
    )
    widgets = {
        'user_name': forms.TextInput(
            attrs={
                # 'placeholder': 'Usuario ...',
                'class': 'input-group-field',
                'max_length': '20',
                'oninvalid': "this.setCustomValidity('Ingrese un nombre de usuario')",
                'oninput': "setCustomValidity('')"

            }
        ),
        'full_name': forms.TextInput(
            attrs={
                # 'placeholder': 'Nombres ...',
                'class': 'input-group-field',
                'max_length': '100',
                'oninvalid': "this.setCustomValidity('Ingrese su nombre completo')",
                'oninput': "setCustomValidity('')"
            }
        ),
        'phone': forms.TextInput(
            attrs={
                # 'placeholder': 'Teléfono ...',
                'class': 'input-group-field',
                'max_length': '50',
                'oninvalid': "this.setCustomValidity('Ingrese su teléfono')",
                'oninput': "setCustomValidity('')"
            }
        ),
        'email': forms.EmailInput(
            attrs={
                # 'placeholder': 'Correo Electronico ...',
                'class': 'input-group-field',
                'max_length': '100',
                'blank': True,
                'oninvalid': "this.setCustomValidity('Ingrese un mail válido')",
                'oninput': "setCustomValidity('')"
            }
        ),
        'role': forms.Select(
            attrs={
                # 'placeholder': 'Rol ...',
                'class': 'input-group-field',
                'required': True,


            }
        ),
        'gender': forms.Select(
            attrs={
                # 'placeholder': 'Género ...',
                'class': 'input-group-field',


            }
        ),
        'date_birth': forms.DateInput(
            format='%Y-%m-%d',
            attrs={
                'type': 'date',
                'class': 'input-group-field',
            },
        ),
    }

def clean_password2(self):
    if self.cleaned_data['password1'] != self.cleaned_data['password2']:
        self.add_error('password2', 'Las contraseñas no son iguales')

一切正常，在我的 html 中显示这种“错误消息”

所以我有一个清除password2的方法，检查是否与密码1（密码确认）相同，我希望错误消息与其他字段的格式相同。这可能吗？感谢您的帮助！

我还附上了我的模板

{% extends "panel.html" %}

{% load  static %}

{% block panel-content %}

<div class="grid-x medium-10">
    <h3 class="cell medium-12" style="text-align: center;color: wheat;">Nuevo Usuario</h3> 
    <div class="cell medium-12">&nbsp </div>
    <div class="cell medium-12 grid-x">
        <div class="cell medium-2"></div>
            <form class="cell medium-8 grid-x"  method="POST">{% csrf_token %}
        
                <div class="cell medium-4">
                <label>Usuario:</label>
                <div class="input-group">
                    <span class="input-group-label"><i class="fi-torso"></i></span>
                    {{ form.user_name }}
                </div>
                
                </div>
                <div class="cell medium-9"></div>
                
                <div class="cell medium-4">
                <label>Nombre:</label>
                <div class="input-group">
                    <span class="input-group-label"><i class="fi-book"></i></span>
                    {{form.full_name}}
                </div>
                </div>
            
                <div class="cell medium-1"></div>

                <div class="cell medium-3">
                <label>Género:</label>
                    <div class="input-group">
                        <span class="input-group-label"><i class="fi-male-female"></i></span>
                        {{form.gender}}
                    </div>
                 </div>

                <div class="cell medium-1"></div>
                
                <div class="cell medium-3">
                    <label>Fecha de Nacimiento:</label>
                    <div class="input-group">
                        <span class="input-group-label"><i class="fi-calendar"></i></span>
                        {{ form.date_birth }}
                    </div>
                </div>


                <div class="cell medium-4">
                    <label>Email:</label>
                    <div class="input-group">
                        <span class="input-group-label"><i class="fi-mail"></i></span>
                        {{form.email}}
                    </div>
                    </div>
                
                    <div class="cell medium-1"></div>
    
                    <div class="cell medium-3">
                        <label>Teléfono:</label>
                        <div class="input-group">
                            <span class="input-group-label"><i class="fi-telephone"></i></span>
                            {{form.phone}}
                        </div>
                        </div>
                <div class="cell medium-4"></div>

                <div class="cell medium-4">
                <label>Rol:</label>
                <div class="input-group">
                    <span class="input-group-label"><i class="fi-star"></i></span>
                    {{form.role}}
                </div>
                </div>
                
                <div class="cell medium-8"></div>
            
                
                
                <div class="cell medium-4">
                <label>Contraseña:</label>
                <div class="input-group">
                    <span class="input-group-label"><i class="fi-key"></i></span>
                    {{ form.password1 }}
                </div>
               
                </div>
                <div class="cell medium-1"></div>
                <div class="cell medium-4">
                <label>Repetir Contraseña:</label>
                <div class="input-group">
                    <span class="input-group-label"><i class="fi-key"></i></span>
                    {{ form.password2 }}
                </div>
                
                </div>
                <!-- {% for error in form.password2.errors %}
            <p class="cell" style="color: red;">
             {{ error|escape }}
            </p>
            {% endfor %} -->
                <div class="cell medium-3"></div>

                <div class="cell medium-2">
                <button type="submit" class="cell success button "> <i class="fi-save"></i>&nbsp Guardar</button>
                
                </div>
            </form>
        <div class="cell medium-2"></div>
    </div>

  </div>
  
  {% endblock panel-content %}

Answer 1

我想你可能对这个答案感兴趣：https://stackoverflow.com/a/54020111/8439435

基本上，您需要编写一个自定义 javascript 函数来检查两个密码是否相互匹配，如果密码不同，则使用 setCustomValidity 在表单验证时显示浏览器错误消息。

Django 在表单字段中使用 setCustomValidity 方法清理

1 个答案: