zoukankan      html  css  js  c++  java
  • Jquery Mobile 客户端验证

    (转自WebWeb Dev .NET ,很容易看懂的)我找了n长时间,这个算是挺不错了。下面是英文原文

    I am working on a jQuery Mobile application and one of the standard requirements when you have form elements is to provide client-side validation.

    I hadn't seen an example of that yet, so my first inclination was to use the jQuery Validation plugin. As it turns out, the implementation is about the same as you would expect with a non-mobile solution.

    <div data-role="page" id="login">
        
      
    <div data-role="header">
         
    <h1>Acme Corporation</h1>
      
    </div>
        
      
    <div data-role="content">
            
        
    <form id="frmLogin">
          
    <div data-role="fieldcontain">
            
    <label for="email">
              
    <em></em> Email: </label>
              
    <input type="text" id="email" 
                name
    ="email" class="required email" />
          
    </div>
                
          
    <div data-role="fieldcontain">
            
    <label for="password"> 
              
    <em></em>Password: </label>
              
    <input type="password" id="password" 
                name
    ="password" class="required" />
          
    </div>
                
          
    <div class="ui-body ui-body-b">
            
    <button class="btnLogin" type="submit" 
              data-theme
    ="a">Login</button>
          
    </div>
        
    </form>
            
      
    </div>
        
    </div>

    In this case I just adding metadata validation classes to the input elements to indicate what rules (example: required, email, etc...) need to be checked when the form is submitted. You can provide these rules also programmatically, but I won't focus on that technique in this post. You can find more details about how to provide validation rules at runtime in the plugin's documentation.

    In JavaScript, all you have to do is to call the validate() method off of the form element and provide a submitHandler that will perform the action once your form has passed all it's validation rules.

    $("#frmLogin").validate({  
       submitHandler: 
    function(form) {           
           console.log(
    "Call Login Action");    
       } 
    }); 

    An interesting challenge comes on mobile devices when considering how to display the validation message in portrait versus landscape mode. I wanted the alignment of the errors to show up different depending upon the orientation.

    As it turns out, the solution to this problem was a simple matter of changing my CSS. The jQuery Mobile framework switches adds a special class (.portrait or .landscape) to the html element depending on the orientation of the mobile device. By using the following CSS the validation errors will display differently depending if the mobile device is in portrait or landscape mode.

    .portrait label.error, .landscape label.error {   
       color: red;   
       font-size: 16px;    
       font-weight: normal;   
       line-height: 1.4;    
       margin-top: 0.5em;    
       width: 100%;    
       float: none; 
    }  
     
     .landscape label.error {   
       display: inline-block;    
       margin-left: 22%; 
     } 
     
    .portrait label.error {     
       margin-left: 0;     
       display: block; 
     }   
     
    em {      
      color: red;    
      font-weight: bold;    
      padding-right: .25em;  
    } 

    Since simulating portrait vs landscape mode on a desktop browser is slightly difficult I took some screenshots from my iPhone for you to see the difference.






  • 相关阅读:
    Java第十次作业-房地产;学生成绩计算
    找回感觉之模拟房地产首付计算
    软件工程第四次作业—结对项目
    【作业】需要改进的用户体验二三则
    项目互测测试方式及报告
    [ASE]项目介绍及项目跟进——TANK BATTLE·INFINITE
    Hello World!
    [ASE]sprint3 总结 & sprint4计划
    [ASE][Daily Scrum]12.15
    [ASE][Daily Scrum]12.12
  • 原文地址:https://www.cnblogs.com/az19870227/p/2086292.html
Copyright © 2011-2022 走看看