Django Form和Ajax提交验证

Form验证

views.py

class LoginForm(Form):
    usr=fields.CharField(required=True,min_length=5,
                         error_messages={
                             'required':'不能为空',
                             'min_length':'不能小于5'
                         })
    pwd=fields.CharField(min_length=18)
    email=fields.EmailField(
        error_messages={
            'required': '不能为空',
            'invalid': '必须为邮箱格式'
        }
    )


def login(request):
    if request.method=='GET':
        return render(request,'login.html')
    else:
        obj=LoginForm(request.POST)
        if obj.is_valid():
            # print(obj.cleaned_data)
            return HttpResponse('ok')
        # else:
        #     print(obj.errors)
        return  render(request,'login.html',{'obj':obj})

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<h1>Login</h1>
<form  action="/login/" method="post">
    {% csrf_token %}
    <p>
        user:<input type="text" name="usr">{{ obj.errors.usr.0 }}
    </p>
    <p>
        password:<input type="password" name="pwd">{{ obj.errors.pwd.0 }}
    </p>
    <p>
        email:<input type="text" name="email">{{ obj.errors.email.0 }}
    </p>
    <input type="submit" value="post">
</form>

</body>
</html>

Ajax验证,页面保留上一次数据

views.py

def ajax_login(request):
    import json
    ret={'status':True,'msg':None}
    obj=LoginForm(request.POST)
    if obj.is_valid():
        print((obj.cleaned_data))
    else:
        ret['status']=False
        ret['msg']=obj.errors
    v=json.dumps(ret)
    return HttpResponse(v)

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<h1>Login</h1>
<form id="myform">
    {% csrf_token %}
    <p>
        user:<input type="text" name="usr">
    </p>
    <p>
        password:<input type="password" name="pwd">
    </p>
    <a onclick="submitForm();">AjaxPost</a>
</form>
<script src="/static/jquery-3.2.1.min.js"></script>
<script>
    function submitForm() {
        $('.c1').remove();
        $.ajax({
            url: '/ajax_login/',
            type: 'POST',
            data: $('#myform').serialize(),
            dataType:'JSON',
            success: function (arg) {
                //console.log(arg);
                if(arg.status){

                }else {
                    $.each(arg.msg,function (index,value) {
                        //console.log(index,value);
                        var tag=document.createElement('span')
                        tag.innerHTML=value[0];
                        tag.className='c1';
                        $('#myform').find('input[name="'+index+'"]').after(tag);
                    })
                }
            }
        })
    }
</script>
</body>
</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现Django中自定义的表单多级联动,需要使用到`ModelForm`和JavaScript来实现。 首先,我们需要创建一个ModelForm,用于实现表单的自定义字段和验证规则。 ```python from django import forms from .models import ModelA, ModelB class MyForm(forms.ModelForm): class Meta: model = ModelA fields = '__all__' # 可根据实际需求选择需要的字段 def __init__(self, *args, **kwargs): super(MyForm, self).__init__(*args, **kwargs) self.fields['second_model'] = forms.ModelChoiceField(queryset=ModelB.objects.none()) if 'first_model' in self.data: try: first_model_id = int(self.data.get('first_model')) self.fields['second_model'].queryset = ModelB.objects.filter(first_model_id=first_model_id) except (ValueError, TypeError): pass elif self.instance.pk: self.fields['second_model'].queryset = self.instance.first_model.modelb_set.order_by('name') ``` 在上面的例子中,`ModelA`是第一个模型,`ModelB`是第二个模型。在`MyForm`类的初始化方法中,根据`first_model`字段的值动态更新`second_model`字段的queryset,实现了多级联动。 接下来,我们需要在模板中添加HTML和JavaScript来实现多级联动效果。 ```html <form method="POST" action=""> {% csrf_token %} {{ form.as_p }} <button type="submit">Submit</button> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $('#id_first_model').change(function() { var url = $(this).attr('data-href'); var first_model_id = $(this).val(); $.ajax({ url: url, data: { 'first_model_id': first_model_id }, success: function(data) { $('#id_second_model').html(data); } }); }); }); </script> ``` 在上面的例子中,我们使用了jQuery来监听`first_model`字段的变化事件。当`first_model`字段的值发生改变时,执行AJAX请求,获取到对应`second_model`字段的选项,并更新页面上的`second_model`字段。 总结来说,我们通过自定义的表单类`MyForm`来实现外键的多级联动,然后通过JavaScript的AJAX请求和动态更新页面的选项来实现表单的多级联动效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值