Form表单 详细参数

功能:
    - 验证用户请求
    - 自动生成HTML(保留上次提交的内容)
详细:
    class Foo(forms.Form):
        usename = fields.CharField() # 正则,插件
        字段:
            CharField                字符串
            EmailField                字符串(邮箱格式)
            IntegerField            字符串(数字格式)
            GenericIPAddressField    字符串(IP格式)
            FileField                文件对象
            RegexField                字符串(自定义正则)
            ChoiceField                多选
            
            插件:
                widgets.TextInput   
                widgets.PasswordInput   
                widgets.Textarea
                
                widgets.Select(attrs={'class': 'form-control'},choices=[(1,'普通用户'),(2,"超级用户")])                        
                widgets.SelectMultiple(attrs={'class': 'form-control'},choices=[(1,'普通用户'),(2,"超级用户")])                        
                widget=widgets.RadioSelect(choices=((1,'上海'),(2,'北京'),))
                widget=widgets.CheckboxInput()
                widget=widgets.CheckboxSelectMultiple()
                widget=widgets.FileInput()
                        
    FK表:
        问题:数据源无法实时更新
        重写构造函数:
                def __init__(self,*args,**kwargs):
                    super(UserForm,self).__init__(*args,**kwargs)
                    self.fields['ut_id'].widget.choices = models.UserType.objects.values_list('id','name')

 

示例(Select SelectMultiple):

class HostCreateForm(forms.Form):
    hostname = fields.CharField(
        required=True,
        max_length=15,
        error_messages={"required": "主机名不能为空"},
        widget=widgets.TextInput(attrs={
            "class": "form-control",
            "placeholder": "hostname"
        })
    )
    address = fields.CharField(
        required=True,
        max_length=15,
        error_messages={"required": "IP地址不能为空"},
        widget=widgets.TextInput(attrs={
            "class": "form-control",
            "placeholder": "address"
        })
    )
    user_id = fields.MultipleChoiceField(
        required=True,
        error_messages={"required": "用户不能为空"},
        widget=widgets.SelectMultiple(
            attrs={"class": "form-control"},
            choices=[],
        )
    )
    business_id = fields.CharField(
        required=True,
        error_messages={"required": "业务线不能为空"},
        widget=widgets.Select(
            attrs={"class": "form-control"},
            choices=[],
        )
    )

    def __init__(self, *args, **kwargs):
        super(HostCreateForm, self).__init__(*args, **kwargs)
        self.fields["user_id"].choices = UserInfo.objects.values_list("id", "username")
        self.fields["business_id"].widget.choices = Business.objects.values_list("id", "name")
Form代码
class Business(models.Model):
    name = models.CharField(max_length=32, unique=True)

    def __str__(self):
        return self.name


class UserInfo(models.Model):
    username = models.CharField(max_length=32, unique=True)
    password = models.CharField(max_length=32)
    email = models.EmailField(max_length=32, default="oldboy@edu.com")

    def __str__(self):
        return self.username


class Host(models.Model):
    hostname = models.CharField(max_length=32, unique=True)
    address = models.GenericIPAddressField()
    user = models.ManyToManyField(UserInfo)
    business = models.ForeignKey(Business)

    def __str__(self):
        return self.hostname
Model代码
class HostCreateView(Auth):
    """
    主机创建视图
    """
    def get(self, request):
        host_obj = HostCreateForm()
        return render(request, "host_create.html", {"host_obj": host_obj})

    def post(self, request):
        print(request.POST)
        host_obj = HostCreateForm(request.POST)
        response = {"status": True, "error": None}
        if host_obj.is_valid():
            host_obj.save(commit=True)
            return HttpResponse(json.dumps(response))
        else:
            response["status"] = False
            response["error"] = host_obj.errors
            return HttpResponse(json.dumps(response))
View代码
<div class="panel panel-danger">
    <div class="panel-heading">
        Host Create
    </div>
    <div class="modal-body">
        <form class="login-form">
            <div class="form-group">
                <label for="recipient-name" class="control-label">Hostname:</label>
                {{ host_obj.hostname }}
                <span id="host-hostname-error"></span>
            </div>
            <div class="form-group">
                <label for="message-text" class="control-label">IPaddress:</label>
                {{ host_obj.address }}
                <span id="host-address-error"></span>
            </div>
            <div class="form-group">
                <label for="message-text" class="control-label">Business:</label>
                {{ host_obj.business_id }}
                <span id="host-business-error"></span>
            </div>
            <div class="form-group">
                <label for="message-text" class="control-label">Owner:</label>
                {{ host_obj.user_id }}
                <span id="host-owner-error"></span>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="create-submit">Login</button>
    </div>
</div>
HTML代码
$("#create-submit").click(function () {
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}'}
        });
        var hostname = $("#id_hostname").val();
        var address = $("#id_address").val();
        var business = $("#id_business_id").val();
        var owner = $("#id_user_id").val();
        $.ajax({
            type: "POST",
            data: {hostname: hostname, address: address, business_id: business, user_id: owner},
            url: "{% url "host_create" %}",
            dataType: "json",
            success: function (data) {
                if (data.status) {
                    $(".register-body").html("<div style='min-height:100px; text-align:center;' >恭喜您注册成功!<a href='#' data-toggle='modal' data-target='#loginModal'>点击我登录...</a></div>");
                } else {
                    $("#host-hostname-error").text(data.error.hostname).css({"color": "red"});
                    $("#host-address-error").text(data.error.address).css({"color": "red"});
                    $("#host-business-error").text(data.error.business_id).css({"color": "red"});
                    $("#host-owner-error").text(data.error.user_id).css({"color": "red"});
                }
            }
        });
    });
Ajax代码

效果图

 

posted @ 2017-06-01 17:59  Vincen_shen  阅读(818)  评论(0)    收藏  举报