0

* *为什么我无法在移动端获得验证我没有在字段上获得验证甚至在浏览器中获得应用验证但未能进入移动端。谁能指出我做错了什么？

<!DOCTYPE html>
<html>
  <head>
   <title>first example</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/lib/cordova-2.0.0.js"></script>
  <script type="text/javascript" src="js/lib/jquery.js"></script>
  <script src="js/lib/jquery.mobile-1.1.1.js"></script>
  <script type="text/javascript" src="js/lib/jqm.page.params.js"></script>
 <script type="text/javascript" src="js/lib/jquery.validate.js"></script>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script type="text/javascript" src ="js/lib/jquery.validate.min.js"></script>
   <script type="text/javascript" src="js/lib/additional-methods.min.js">
   <script type="text/javascript" charset="utf-8" src="js/lib/helloworldjs/alldatabse.js"></script>
<script  type="text/javascript"> 
$(document).ready(
 function()
  { $("#formregistration").validate(
    { rules:{
          usernameforreg:
             {
              required:true,
              minlength:4,
              maxlength:10

             },
          useremail:
             {
              required:true,
              email:true

             },
         passwordforreg:
              {
              required:true,
              minlength:8
              },
         retypepassword:
             {
             required:true,
             equalTo:"#passwordforreg"
             }
            },
      messages:{
          usernameforreg:
             {
              required:"pls enter name",
             minlength:$.format("Keep typing, at least {0} characters required!"),
             maxlength:$.format("Maximum {0} characters allowed!")

             },
         useremail:
             {
             required:"pls enter email id",
             email:"enter valid email id"
             },
        passwordforreg:
              {
              required:"pls enter password",
              minlength:$.format("at least {0} characters required!")
              },     
         retypepassword:
             {
             required:"pls confirm password",
             equalTo:"both passwords must match"
             }

             }

    });
     $("#formlogin").validate(
       {rules:
           {username:
                {
                  required:true,
                  minlength:4
                },
             password:
               {
                 required:true,
                 minlength:8
               }
           },
        messages:
           {username:
              {
                required:"pls enter user name",
                minlength:"pls enter atleast {0} characters"
              },
            password:
              {
                required:"pls enter password",
                minlength:"password should be atleast {0} characters"
              }


           }
       });




  });

 </script> 
</head>  
 <body>


 <div data-role="page" id="login">
 <form name="login" id="formlogin" method="get" action="" accept-charset = "utf-8">

 <div style="background-image: url(css/lib/images/purty_wood.png); background-color:#D3BEAC; height:50%; margin-top:200px; border:6px groove orange;  width:100%; margin:0 auto;">

   <label for="username">USER NAME:</label>
   <input type="text" name="username" id= "usrname" placeholder="ali"  size="10" style="color:#ff9900;" required></input> </br>

   <label for = "password">PASSWORD:</label>
   <input type = "password" name="password" id="usrpswd" placeholder="please enter your password" style="color:#ff9900;" required title="User name is required"></input></br>

   <a href="#" id ="loginbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" onclick="doLogin1();" style= "width:120px;" "height:60px;" "float:right;">LOGIN</a>
   <a href="#" id ="signupbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" onclick="showRegisterForm();" style="width:120px;" "height:60px;" "float:right;">SIGN UP</a>

 </div>
</form>
 </div> 


<div data-role="page" id="registration">
 <form name="" id="formregistration"  method="get" action="">

  <div style="background-image:url('/helloworld/assets/www/css/lib/images/purty_wood.png'); height:30%; border:3px solid-black; position:absolute; top:25%; left:25%; right:25%; width:350px;">

  <label for="usernameforreg">USER NAME:</label>
  <input type="text" name="usernameforreg" id="usrnameforreg" placeholder="pls enter your name" style="color:#ff9900;" required></input></br>

  <label for="emailid">EMAIL ID:</label> 
  <input type="email" name="useremail" id="useremail" placeholder="please enter your email id" style="color:#ff9900;" required></input></br>

  <label for="passwordforreg">PASSWORD:</label>
  <input type="password" name="passwordforreg" id="passwordforreg" palceholder="pls enter your password" style="color:#ff9900;"></input></br>

  <label for="retypepassword">RETYPE PASSWORD:</label>
  <input type="password" name="retypepassword" id="retypepasswordforreg" palceholder="retype password" style="color:#ff9900;" classrequired></input></br>

  <a href="#" id="submitbtn" data-role="button" data-theme="b" data-mini="true" onclick="registrationProcess();" style="width:120px;" "height:60px;" "float:center;">SUBMIT</a>

  </div>
 </form> 

</div>
  </body>
  </html>
4

1 回答 1

2

如果您可以在删除所有多余和多余的代码的情况下发布您的示例，那么在 SO 对我们来说会更容易。例如，我们不需要查看所有的内联样式。

总之，我发现了一堆问题...

1）您没有正确包含脚本。您首先需要（并且一次）jQuery，然后是其他所有内容。非常仔细地检查你的语法；您缺少</script>. additional-methods.js您也不需要同时包含同一脚本的缩小版本和未缩小版本……只需选择一个。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/lib/jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/lib/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/lib/jqm.page.params.js"></script>
<script type="text/javascript" src="js/lib/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/lib/additional-methods.min.js"></script>
<script type="text/javascript" src="js/lib/helloworldjs/alldatabse.js"></script>

2) 在您的表单中，您有一些无效的 HTML。输入和换行符是“自动关闭的”......

不是这样的： <input></input>和</br>

是的，像这样： <input />和<br />

3) 您正在使用内联 JavaScript 来使用内联onclick事件处理程序调用其他函数。由于您使用的是 jQuery，因此您不妨充分利用它。删除内联 JavaScript 并执行类似的操作，这可以有效地将您的锚标记变成一个提交按钮。

$('#loginbtn').on('click', function (e) {
    e.preventDefault();
    $("#formlogin").submit();
});

4) 在表单 HTML 中，您可以更改required为required="required"更好的语法。顺便说一句，由于您已经required在 内声明.validate()，因此您无需在 HTML 中再次指定这些规则......做一个或另一个......不需要两者。我从 HTML 中删除了这些。

5）由于您已经在 中指定了所有消息.validate()，因此我title从输入中删除了该属性。

6）您在几个地方拼错了placeholder属性。palceholder

随着一切（我认为）修复，jQuery Validation 似乎正在工作：

演示：http: //jsfiddle.net/5T3tq/1/

您现在可以慢慢添加其他插件和功能

jQuery :

$(document).ready(function () {

    $('#loginbtn').on('click', function (e) {
        e.preventDefault();
        $("#formlogin").submit();
    });

    $('#submitbtn').on('click', function (e) {
        e.preventDefault();
        $("#formregistration").submit();
    });

    $('#signupbtn').on('click', function (e) {
        e.preventDefault();
        //  show register form
        $('#registration').show();
    });

    $("#formregistration").validate({
        rules: {
            usernameforreg: {
                required: true,
                minlength: 4,
                maxlength: 10

            },
            useremail: {
                required: true,
                email: true

            },
            passwordforreg: {
                required: true,
                minlength: 8
            },
            retypepassword: {
                required: true,
                equalTo: "#passwordforreg"
            }
        },
        messages: {
            usernameforreg: {
                required: "pls enter name",
                minlength: $.format("Keep typing, at least {0} characters required!"),
                maxlength: $.format("Maximum {0} characters allowed!")

            },
            useremail: {
                required: "pls enter email id",
                email: "enter valid email id"
            },
            passwordforreg: {
                required: "pls enter password",
                minlength: $.format("at least {0} characters required!")
            },
            retypepassword: {
                required: "pls confirm password",
                equalTo: "both passwords must match"
            }
        }
    });

    $("#formlogin").validate({
        rules: {
            username: {
                required: true,
                minlength: 4
            },
            password: {
                required: true,
                minlength: 8
            }
        },
        messages: {
            username: {
                required: "pls enter user name",
                minlength: "pls enter atleast {0} characters"
            },
            password: {
                required: "pls enter password",
                minlength: "password should be atleast {0} characters"
            }
        }
    });

});

HTML：

<div data-role="page" id="login">
    <form name="login" id="formlogin" method="get" action="" accept-charset="utf-8">
        <div style="background-image: url(css/lib/images/purty_wood.png); background-color:#D3BEAC; height:50%; margin-top:200px; border:6px groove orange;  width:100%; margin:0 auto;">
            <label for="username">USER NAME:</label>
            <input type="text" name="username" id="usrname" placeholder="ali" size="10" style="color:#ff9900;" />
            <br />
            <label for="password">PASSWORD:</label>
            <input type="password" name="password" id="usrpswd" placeholder="please enter your password" style="color:#ff9900;" />
            <br /> <a href="#" id="loginbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" style="width:120px;" "height:60px;" "float:right;">LOGIN</a>
 <a href="#" id="signupbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" style="width:120px;" "height:60px;" "float:right;">SIGN UP</a>
        </div>
    </form>
</div>
<div data-role="page" id="registration" style="display: none;">
    <form name="" id="formregistration" method="get" action="">
        <div style="background-image:url('/helloworld/assets/www/css/lib/images/purty_wood.png'); height:30%; border:3px solid-black; position:absolute; top:25%; left:25%; right:25%; width:350px;">
            <label for="usernameforreg">USER NAME:</label>
            <input type="text" name="usernameforreg" id="usrnameforreg" placeholder="pls enter your name" style="color:#ff9900;" />
            <br />
            <label for="emailid">EMAIL ID:</label>
            <input type="email" name="useremail" id="useremail" placeholder="please enter your email id" style="color:#ff9900;" />
            <br />
            <label for="passwordforreg">PASSWORD:</label>
            <input type="password" name="passwordforreg" id="passwordforreg" placeholder="pls enter your password" style="color:#ff9900;" />
            <br />
            <label for="retypepassword">RETYPE PASSWORD:</label>
            <input type="password" name="retypepassword" id="retypepasswordforreg" placeholder="retype password" style="color:#ff9900;" />
            <br/> <a href="#" id="submitbtn" data-role="button" data-theme="b" data-mini="true" style="width:120px;" "height:60px;" "float:center;">SUBMIT</a>
        </div>
    </form>
</div>
于 2013-03-26T16:25:15.720 回答