Cách tạo biểu mẫu có các thành phần lặp lại tốt

Question

Tiêu đề thực sự không nói, vì tôi đang gặp sự cố khi tóm tắt sự cố. Vì vậy, ở đây đi lời giải thích dài:

Hãy nói rằng tôi thêm thông tin liên lạc nhiều, và tôi có những lĩnh vực:

• Tên của xúc
• Phương pháp liên hệ (email, số điện thoại, tin nhắn tức thời)
  • Nếu email: Hiện một trường email (giả sử lĩnh vực này tồn tại)
  • Nếu số điện thoại: Hiển thị trường số điện thoại
  • Nếu tin nhắn tức thời: Sho w một trường văn bản

Vì vậy, ngay lập tức, tôi sẽ được cần JavaScript để hoàn thành này trên trang riêng của mình (để thêm thêm hoặc tiếp xúc xóa lĩnh vực), mà tôi ok với. Tuy nhiên, vì tôi có thể thêm nhiều địa chỉ liên hệ (và là nhà phát triển phần mềm, tôi không biết số người liên hệ muốn thêm vào, nó có thể là 1, 10 hoặc 100)

Vì vậy, vấn đề lớn nhất của tôi là Tôi sẽ cấu trúc những thứ như tên cho từng lĩnh vực. Tôi có nên ném mọi thứ vào những thứ như names[], contactmethods[] và truy cập mọi thứ theo thứ tự hoặc nếu có giải pháp tốt hơn.

Ngoài ra, nếu máy chủ bắt đầu xác minh các thông tin này và tìm thấy một số thông tin không đúng định dạng, tôi muốn có thể gửi dữ liệu mà khách hàng đã gửi đến máy chủ quay lại máy khách, vì vậy họ không bị mất mọi thứ họ đã nhập. Làm thế nào tôi có thể dễ dàng thực hiện điều đó?

Một số thông tin nền: Technologies hiện đang sử dụng (đó là có liên quan):

• Flask
• jQuery
• WTForms

Answer 1

Không cần phải xây dựng bất cứ điều gì (ít nhất là trên máy chủ bên cạnh) - WTForms đã hỗ trợ những gì bạn cần - nó gọi chúng là "field enclosures". Hành vi mà bạn đang tìm kiếm được tìm thấy trong wtforms.fields.FormField và wtforms.fields.FieldList

class ContactForm(Form): 
    name = TextField("Name", validators=[Required()]) 
    contact_type = SelectField("Contact Type", 
           validators=[Required()], 
           choices=[ 
            ("email", "Email"), 
            ("phone", "Phone Number"), 
            ("im", "Instant Message") 
           ]) 
    # `If` is a custom validator - see below 
    email_address = TextField("Email", 
            validators=[If("contact_type", 
                "email", 
                [Required(), Email()]) 
            ]) 
    phone_number = TextField("Phone #", 
            validators=[If("contact_type", 
                  "phone", [Required()]) 
            ]) 
    im_handle = TextField("IM Handle", 
            validators=[If("contact_type", 
                  "im", [Required()]) 
            ]) 


class SignUpForm(Form): 
    # Other fields go here 
    contacts = FieldList(FormField(ContactForm)) 

Bạn cũng sẽ cần một custom validator để xác nhận các trường thích hợp, đưa ra sự lựa chọn của người dùng:

# CAUTION: Untested code ahead 
class If(object): 
    def __init__(self, 
         parent, 
         run_validation=None, 
         extra_validators=None, 
         msg=None): 
     self.parent = parent 
     self.msg = msg if msg is not None else u"Invalid" 
     if callable(run_validation): 
      self.run_validation = run_validation 
     else: 
      _run_validation = lambda self, parent, form: parent.data == run_validation 
      self.run_validation = _run_validation 
     self.extra_validators = extra_validators if extra_validators is not None \ 
                else [] 

    def __call__(self, field, form): 
     parent = getattr(form, self.parent) 
     if self.run_validation(parent, form): 
      return field.validate(form, extra_validators=self.extra_validators) 

Khi bạn gọi form.validate() trên phía máy chủ các lĩnh vực sẽ được tự động kiểm tra đối với các yêu cầu và các lỗi sẽ được phổ biến một cách thích hợp để bạn có thể hiển thị chúng ở phía máy khách.

Tạo các trường mới ở phía máy khách rất đơn giản và WTForms sẽ chọn chúng ở phía sau miễn là bạn đặt tên là using the same naming convention it uses - cụ thể là field.short_name + '-' + index.