我目前正在开发一个移动 html5 项目。我正在使用这个jQuery 验证插件来验证带有表单的登录屏幕。我还在使用带有单页模板的 jQuery Mobile(我在单独的 html 文件中有页面,但是在更改页面时,JQM 会读取文件并将新页面内容注入 DOM)。我强制 JQM 在应用程序中的每个页面更改中再次重新加载页面:
$.mobile.changePage("pageurl", {reloadPage: true});
第一页是登录屏幕,其中包含一个简单的用户名和密码表单。第一次一切都很顺利:如果提交按钮被按下并且某些字段为空,验证插件会抱怨。如果所有字段都正常并按下提交,我对 WS 进行了几次 ajax 调用,将数据保存在数据库中,然后显示下一页。
这是登录屏幕的代码:
$(document).on("pageinit", "#login_screen", function() {
//This event fires every time we show this JQM "page".
$("#id_index_form").validate({
submitHandler : function(form) {
user = form.user.value;
password = form.psw.value;
login();
}
});
});
function login(){
//Calls the login WS (ommited)
//if login went ok, inject next page in DOM using ajax
$.mobile.changePage("nextpage.html", {reloadPage: true});
}
一件重要的事情是我不能使用内置机制的表单,所以login
改为调用自定义函数。
在下一个屏幕中,如果用户返回登录,我会再次更改页面:
$.mobile.changePage("login.html", {reloadPage: true});
现在验证插件不再起作用了。它不验证,当按下提交时,表单被清除并且没有任何反应。然而,正如预期的那样,mobileinit 事件再次被触发。控制台中没有错误。
有什么我想念的吗?我怎么能“重启”插件?也许它仍然认为之前的通话没有结束?
提前致谢。
更新:
我正在调试非缩小插件 js 文件,看起来问题在于它在validate
调用中所做的初始化。在成功完成的第一次调用中,插件创建了一个绑定到表单的验证器,并缓存了验证器。在第二次调用中,我需要它将新验证器绑定到新表单,而不是返回旧验证器(绑定到旧表单)。