登录页面上的 jQuery Mobile 表单验证

Posted 2023-05-09

【中文标题】登录页面上的 jQuery Mobile 表单验证

【英文标题】：jQuery Mobile form validation on login page

【发布时间】：2015-07-09 06:49:56

【问题描述】：

我一直在寻找一种方法来验证我的登录页面上的表单。我在 *** 上找到了一个很有前途的解决方案，并附带了一个 JSFiddle。

我不喜欢他/她的风格，所以我只是把我认为重要的东西放进去。

现在发生的情况是，它不再只是转到下一页（就像以前那样），而是……刷新了页面（至少看起来是这样）。

这是我使用的 html 和 Js

<form id="form1" name="ff1">

    <p class="numba1"><input type="email" name="email" id="email" 
style="border: 1px solid grey !important; background:#FFF8E6; box-
shadow: none !important; border: none;" id="fremail"  data-wrapper-
class="ui-custom" placeholder="Email"></p>

    <p class="numba2"><input type="password" name="password" 
id="password" style=" border: 1px solid grey !important; background-
color:#FFF8E6; text-shadow: none; box-shadow: none !important; 
border: none;" value="" data-wrapper-class="ui-custom" 
placeholder="Password"></p>


  <input type="submit" value="LOGIN" id="submit"  />

  </form>

 $('#form1').validate(
 rules: 

    email: 
        required: true
    ,
    password: 
        required: true
    
 ,
 messages: 

    email: 
        required: "Please enter your last name."
    ,
    password: 
        required: "Please enter your email."
    
 ,
 errorPlacement: function (error, element) 
    error.appendTo(element.parent().prev());
 ,
 submitHandler: function (form) 
    $(':mobile-pagecontainer').pagecontainer('change', '#homePage', 
        reload: false
    );
    return false;

); 

【问题讨论】：

如果您仍在寻找解决方案，您可能想发布更多代码？在我看来，此页面不仅仅是您发布的 html。另外，您还喜欢哪些其他 *** 和 JSFiddle？一两个链接可能会有所帮助。

我得到了学校老师的帮助，代码比我想象的要简单得多。不过，感谢您一直以来的关注。

【参考方案1】：

当您根据登录成功或失败进行身份验证检查时，您必须处理 POST 请求服务器端并提供不同的页面或重定向。

就显示同一页面而言，如果您需要 POST 转到不同的位置，则需要添加 action 属性并指定一个 url。

<form action="/login" id="form1" name="ff1" method="post" onsubmit="return validateForm();">

【讨论】：

仍然出现页面刷新或重新加载的相同效果