form组件的总结

最新推荐文章于 2022-03-10 01:16:20 发布

转载最新推荐文章于 2022-03-10 01:16:20 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=hbk22a1bcaab&title=form%E7%BB%84%E4%BB%B6%E7%9A%84%E6%80%BB%E7%BB%93

文章标签：

#form组件

前端专栏收录该内容

241 篇文章

订阅专栏

本文详细解析了form组件的工作原理，包括局部钩子与全局钩子的运作流程，以及如何在实际项目中运用这些组件进行数据验证和处理。通过具体实例展示了如何在Python的Django框架中创建和使用表单，以及如何处理AJAX请求。

1、form组件（******）                 
                  局部钩子
                  全局钩子
                   '''
                    实例化时:

                        self.fields={
                            "username":"字段规则对象",
                            "password":"字段规则对象",
                        }

                    is_valid时:
                        self._errors = {}
                        self.cleaned_data = {}

                        #局部钩子:

                        for name, field in self.fields.items():
                              try:

                                    value = field.clean(value)
                                    self.cleaned_data[name] = value
                                    if hasattr(self, 'clean_%s' % name):
                                        value = getattr(self, 'clean_%s' % name)()
                                        self.cleaned_data[name] = value
                              except ValidationError as e:
                                    self.add_error(name, e)

                        # 全局钩子:

                        self.clean()               # def self.clean():return self.cleaned_data

                        return  not self.errors    # True或者False
                    '''
                    使用组件：
                    
                            form.py
                            
                                  class LoginForm(forms.Form):
                                       username=forms.CharField()
                                                    
                            views.py:
                                  
                                  def login(request):
                                       if request.is_ajax():
                                            loginform=LoginForm(request.POST)
                                            
                                            loginResponse={"user":None,"error_msg":None}
                                            if loginform.is_valid():
                                                loginResponse["user"]=username
                                                # session操作
                                            
                                                                                        else:
                                                loginResponse["error_msg"]loginform.errors
                                       
                                            return Httpresponse(json.dumps(loginResponse))
                                       
                                       loginform=LoginForm()
                                       
                                       return(request,"login.html",{"loginform":loginform})               
                        
                            login.html:
                                    <form>
                                           {{loginform.username}} 
                                            <input type="button" value="submit" id="subBtn">    
                                                                         </form>
                                    
                                                                            <script>
                                              $("#subBtn").click(function(){
                                              
                                                     $.ajax({
                                                        url:"/login/",
                                                        type:"POST",
                                                        data:{},
                                                        success:function(data){
                                                               // data    loginResponse
                                                        
                                                        }               
                                                     })
                                              })

                                    </script>