2023年6月21日发(作者：)
te+提交的三种⽅式概述：本篇主要讨论te结合实现对表单的验证和提交⽅案。⽅式⼀：是通过te的submitHandler选项，即当表单通过验证时执⾏回调函数。在这个回调函数中通过来提交表单；⽅式⼆：是通过的beforeSubmit，即在提交表单前执⾏的回调函数，这个函数如果返回true，则提交表单，如果返回false，则终⽌提交表单。根据te插件的valid()⽅法，就可以通过提交表单时来对表单进⾏验证。⽅式三：是通过te验证表单的validate⽅法。这个⽅法的好处是对表单验证的控制更加⾃由实例：下⾯通过三个实例分别阐述上⾯的三种⽅式载⼊CSS样式⽂件CSS样式⽂件内容input{ height:25px; line-height:25px; padding-left:4px;}d{ padding: 0px 5px 0px 25px; margin-left: 10px; margin-top: 0px; margin-bottom: 3px; height: 25px; line-height:25px; font-size: 12px; white-space: nowrap; text-align: left; color: #E6594E; background: url("images/") no-repeat 3px; /* #FCEAE8 */}ked{ padding: 0px 5px 0px 25px; margin-left: 10px; margin-top: 0px; margin-bottom: 3px; height: 23px; line-height:23px; font-size: 12px; border: 1px solid #E6594E; white-space: nowrap; text-align: left; color: #E6594E; background: #FCEAE8 url("images/") no-repeat 3px;}载⼊javascript⽂件HTML内容
te+提交⽅式1的javascript内容te+提交⽅式2的javascript内容te+提交⽅式3的javascript内容 DEMO源码：⼀些问题1、其实这个问题在昨天晚上写这篇⽂章的时候就有发现，即我在HTML⽂件头使⽤时，输⼊框及错误信息的样式似乎有些问题。不过今天发现问题并⾮这么简单，在使⽤时，针对“姓名”这个输⼊框来说——只须达到三个字符就认为通过验证——在输⼊第⼀个字符、第⼆个字符时，错误显⽰正常，输⼊第三个字符时，错误显⽰消失，并显⽰⼀个表⽰验证通过的“逗号”图⽚。到⽬前为⽌，⼀切似乎都很正常，但如果在继续输⼊字符，⽐如输⼊第四个字符、第五个字符......问题出现了。如下图所⽰：不使⽤，⽽使⽤时没有这样的问题，⼀切正常。不过，现在的问题是，为什么加上会产⽣这样的问题?⽽且，做为前端来说，加上是必须的。这个问题处理的⽐较纠结，这⾥罗列⼀下处理的过程。并且在最后给⼀个解决⽅案⾸先，是因为昨天在查看错误提⽰信息，关注⼀下插⼊错误信息的代码。我在errorPlacement中增加了⼀句：alert(().html());errorPlacement:function(error,element){ alert(().html()); var s=().find("span[htmlFor='" + ("id") + "']"); if(s!=null){ (); } To(());},输⼊第⼀个字符时，得到如下图所⽰输⼊三个字符，验证成功后，得到如下图所⽰：继续输⼊更多字符，得到如下图所⽰这就说明了以下⼏个问题：1、不管验证失败还是成功，都会调⽤errorPlacement:function(...)2、()没有起作⽤。由于在写这篇⽂章时使⽤的是⽽不是，弹出的内容是htmlFor="cusername"，⽽不是for="cusername"，如下图所⽰：因此，上⾯的代码中写成如下的⽅式 var s=().find("span[htmlFor='" + ("id") + "']"); if(s!=null){ (); }然⽽在下，⽆法根据htmlFor找到，因此这⾥应该把htmlFor改成for，即errorPlacement:function(error,element){ alert(().html()); var s=().find("span[for='" + ("id") + "']"); if(s!=null){ (); } To(());},问题似乎解决了。但上⾯提到，不管验证成功或失败，都会调⽤errorPlacement:function(...)，那可以在这⾥判断有没有错误，如果有错误，则显⽰。防⽌已经验证成功的情况下仍会调⽤。这样就不会寻找span的for属性值是否为当前控件的name名称了（例⼦中是for="cusername"）。改进的代码如下：errorPlacement:function(error,element){ if(()!=''){ To(()); }},虽然解决问题，但是在chrome、firefox下仍有问题。了解这个问题的现象，可以⽤firefox或chrome测试⼀下——焦点离开输⼊框后，⽆法验证，只有点击“提交”按钮后才可以验证——这个问题的解决⽅案⽬前还没有深⼊下去。但是有解决的办法是，将上⾯的jquery1.6.2换成jquery1.3.2或jquery1.4（其它的jquery版本未测试，可能是低于jquery1.6.2的版本都可以）即可解决这个问题。建议：1、使⽤jquery1.3.2版本，这样可以节省很多时间来解决兼容⽅⾯的问题。更多：本例⼦中的te，解决了remote远程验证只返回true or false的局限。可以返回代码及出错的提⽰信息，更好的⼈性化需求。使⽤⽅法就在这介绍⼀下 增加以下函数function GetRemoteInfo(postUrl,data){ var remote = { type: "POST", async: false, url: postUrl, dataType: "xml", data: data, dataFilter: function(dataXML) { var result = new Object(); = jQuery(dataXML).find("Result").text(); = jQuery(dataXML).find("Msg").text(); //alert(); if ( == "-1") { = false; return result; }else{ = == "1" ? true : false; return result; } } }; return remote;}$(document).ready(function(){ var dataInfo ={email:function(){return $("#cemail").val();}}; var remoteInfo = GetRemoteInfo('?time='+(new Date()).getTime(),dataInfo); $('#commentForm').validate({ rules:{ username:{ required:true, minlength:3 }, email:{ required:true, remote:remoteInfo } } }); ....});返回的内容为xml格式，格式如下';>2023年6月21日发(作者：)
te+提交的三种⽅式概述：本篇主要讨论te结合实现对表单的验证和提交⽅案。⽅式⼀：是通过te的submitHandler选项，即当表单通过验证时执⾏回调函数。在这个回调函数中通过来提交表单；⽅式⼆：是通过的beforeSubmit，即在提交表单前执⾏的回调函数，这个函数如果返回true，则提交表单，如果返回false，则终⽌提交表单。根据te插件的valid()⽅法，就可以通过提交表单时来对表单进⾏验证。⽅式三：是通过te验证表单的validate⽅法。这个⽅法的好处是对表单验证的控制更加⾃由实例：下⾯通过三个实例分别阐述上⾯的三种⽅式载⼊CSS样式⽂件CSS样式⽂件内容input{ height:25px; line-height:25px; padding-left:4px;}d{ padding: 0px 5px 0px 25px; margin-left: 10px; margin-top: 0px; margin-bottom: 3px; height: 25px; line-height:25px; font-size: 12px; white-space: nowrap; text-align: left; color: #E6594E; background: url("images/") no-repeat 3px; /* #FCEAE8 */}ked{ padding: 0px 5px 0px 25px; margin-left: 10px; margin-top: 0px; margin-bottom: 3px; height: 23px; line-height:23px; font-size: 12px; border: 1px solid #E6594E; white-space: nowrap; text-align: left; color: #E6594E; background: #FCEAE8 url("images/") no-repeat 3px;}载⼊javascript⽂件HTML内容
te+提交⽅式1的javascript内容te+提交⽅式2的javascript内容te+提交⽅式3的javascript内容 DEMO源码：⼀些问题1、其实这个问题在昨天晚上写这篇⽂章的时候就有发现，即我在HTML⽂件头使⽤时，输⼊框及错误信息的样式似乎有些问题。不过今天发现问题并⾮这么简单，在使⽤时，针对“姓名”这个输⼊框来说——只须达到三个字符就认为通过验证——在输⼊第⼀个字符、第⼆个字符时，错误显⽰正常，输⼊第三个字符时，错误显⽰消失，并显⽰⼀个表⽰验证通过的“逗号”图⽚。到⽬前为⽌，⼀切似乎都很正常，但如果在继续输⼊字符，⽐如输⼊第四个字符、第五个字符......问题出现了。如下图所⽰：不使⽤，⽽使⽤时没有这样的问题，⼀切正常。不过，现在的问题是，为什么加上会产⽣这样的问题?⽽且，做为前端来说，加上是必须的。这个问题处理的⽐较纠结，这⾥罗列⼀下处理的过程。并且在最后给⼀个解决⽅案⾸先，是因为昨天在查看错误提⽰信息，关注⼀下插⼊错误信息的代码。我在errorPlacement中增加了⼀句：alert(().html());errorPlacement:function(error,element){ alert(().html()); var s=().find("span[htmlFor='" + ("id") + "']"); if(s!=null){ (); } To(());},输⼊第⼀个字符时，得到如下图所⽰输⼊三个字符，验证成功后，得到如下图所⽰：继续输⼊更多字符，得到如下图所⽰这就说明了以下⼏个问题：1、不管验证失败还是成功，都会调⽤errorPlacement:function(...)2、()没有起作⽤。由于在写这篇⽂章时使⽤的是⽽不是，弹出的内容是htmlFor="cusername"，⽽不是for="cusername"，如下图所⽰：因此，上⾯的代码中写成如下的⽅式 var s=().find("span[htmlFor='" + ("id") + "']"); if(s!=null){ (); }然⽽在下，⽆法根据htmlFor找到，因此这⾥应该把htmlFor改成for，即errorPlacement:function(error,element){ alert(().html()); var s=().find("span[for='" + ("id") + "']"); if(s!=null){ (); } To(());},问题似乎解决了。但上⾯提到，不管验证成功或失败，都会调⽤errorPlacement:function(...)，那可以在这⾥判断有没有错误，如果有错误，则显⽰。防⽌已经验证成功的情况下仍会调⽤。这样就不会寻找span的for属性值是否为当前控件的name名称了（例⼦中是for="cusername"）。改进的代码如下：errorPlacement:function(error,element){ if(()!=''){ To(()); }},虽然解决问题，但是在chrome、firefox下仍有问题。了解这个问题的现象，可以⽤firefox或chrome测试⼀下——焦点离开输⼊框后，⽆法验证，只有点击“提交”按钮后才可以验证——这个问题的解决⽅案⽬前还没有深⼊下去。但是有解决的办法是，将上⾯的jquery1.6.2换成jquery1.3.2或jquery1.4（其它的jquery版本未测试，可能是低于jquery1.6.2的版本都可以）即可解决这个问题。建议：1、使⽤jquery1.3.2版本，这样可以节省很多时间来解决兼容⽅⾯的问题。更多：本例⼦中的te，解决了remote远程验证只返回true or false的局限。可以返回代码及出错的提⽰信息，更好的⼈性化需求。使⽤⽅法就在这介绍⼀下 增加以下函数function GetRemoteInfo(postUrl,data){ var remote = { type: "POST", async: false, url: postUrl, dataType: "xml", data: data, dataFilter: function(dataXML) { var result = new Object(); = jQuery(dataXML).find("Result").text(); = jQuery(dataXML).find("Msg").text(); //alert(); if ( == "-1") { = false; return result; }else{ = == "1" ? true : false; return result; } } }; return remote;}$(document).ready(function(){ var dataInfo ={email:function(){return $("#cemail").val();}}; var remoteInfo = GetRemoteInfo('?time='+(new Date()).getTime(),dataInfo); $('#commentForm').validate({ rules:{ username:{ required:true, minlength:3 }, email:{ required:true, remote:remoteInfo } } }); ....});返回的内容为xml格式，格式如下';>
发布评论