我在 Django 中创建了两个表单:一个用于注册新用户,一个用于登录用户。它们工作正常,但我想实现一个 Ajax 控件:如果出现错误,页面不会重新加载,而是模式窗口停留在那里并显示错误。
这是我的观点
def register(request):
registered = False
if request.method == 'POST':
user_form = CustomUserCreationForm(request.POST)
if user_form.is_valid():
user = user_form.save()
registered = True
return render(request, 'blog/registered.html')
else:
print user_form.errors
else:
user_form = CustomUserCreationForm()
return render(request, 'blog/post_list.html', {'user_form': user_form})
def login(request):
if request.method == 'POST':
login_form = CustomLoginForm(request.POST)
email = request.POST.get('email')
password = request.POST.get('password2')
user = authenticate(email=email, password=password)
if user:
if user.is_active:
auth_login(request, user)
return HttpResponseRedirect('/')
else:
return HttpResponse("Your Pin a Voyage account is disabled.")
else:
print "Invalid login details: {0}, {1}".format(email, password)
return HttpResponse("Invalid login details supplied. Get back to the <a href="/">homepage</a>.")
else:
login_form = CustomLoginForm()
return render(request, 'blog/post_list.html', {'login_form': login_form})
表格
@parsleyfy
class CustomUserCreationForm(UserCreationForm):
"""
A form that creates a user, with no privileges, from the given email and password.
"""
email = forms.EmailField(label='', required=True, widget = forms.TextInput(
attrs = {
'placeholder': 'E-Mail',
'class': 'form-control'
}
))
first_name = forms.CharField(label='', required=True, widget = forms.TextInput(
attrs = {
'placeholder': 'First name',
'class': 'form-control'
}
))
second_name = forms.CharField(label='', required=True, widget = forms.TextInput(
attrs = {
'placeholder': 'Last name',
'class': 'form-control'
}
))
password1 = forms.CharField(label='', required=True, widget=forms.PasswordInput(attrs = {
'placeholder': 'Password',
'class': 'form-control'
}))
password2 = forms.CharField(label='', required=True, widget=forms.PasswordInput(attrs = {
'placeholder': 'Password confirmation (enter the same password as above, for verification)',
'equalto': "new_password1",
'error-message': "Your passwords do not match.",
'class': 'form-control'
}))
class Meta:
model = CustomUser
fields = ("email", "first_name", "second_name",)
def save(self, commit=True):
user = super(CustomUserCreationForm, self).save(commit=False)
user.set_password(self.cleaned_data['password2'])
if commit:
user.save()
return user
@parsleyfy
class CustomLoginForm(forms.ModelForm):
"""
A form that login a user.
"""
email = forms.EmailField(label='', required=True, widget = forms.TextInput(
attrs = {
'placeholder': 'E-Mail',
'class': 'form-control'
}
))
password2 = forms.CharField(label='', required=True, widget=forms.PasswordInput(attrs = {
'placeholder': 'Password',
'class': 'form-control'
}))
class Meta:
model = CustomUser
fields = ('email',)
这是模板
<!-- Trigger the modal with a button -->
<a id="login_btn" class="btn_sub_log top-menu"><span class="glyphicon glyphicon-lock"></span></a>
<!-- Modal -->
<div class="modal fade" id="login_modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" id="sign-up">Login with Pin a Voyage</h3>
</div>
<div class="modal-body">
<form data-parsley-validate method="post" action="/login/" enctype="multipart/form-data">
{% csrf_token %}
{% if next %}
<input type="hidden" name="next" value="{{ next }}" />
{% endif %}
{{ login_form.as_p }}
<input type="submit" class="btn btn-info submit" name="submit" value="Login" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<a id="subscribe_btn" class="btn_sub_log"><h2 class="top-menu sign-up">Sign up!</h2></a>
<!-- Modal -->
<div class="modal fade" id="subscribe_modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" id="sign-up">Register with Pin a Voyage</h3>
</div>
<div class="modal-body">
<form data-parsley-validate id="user_form" method="post" action="/register/" enctype="multipart/form-data">
{% csrf_token %}
{{ user_form.as_p }}
<input type="submit" class="btn btn-info submit" name="submit" value="Register" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
执行此操作的最佳做法是什么?
为此,您需要使用 JavaScript 在表单发送到服务器之前对其进行验证。 我推荐欧芹图书馆;您可以使用小部件 attrs 将正确的类和 attr 添加到表单中,然后包含 Parsley 脚本,我相信这是给定您当前代码将验证添加到前端的最简单方法。