首页>>表单>>三步注册效果(2014-09-05)

三步注册效果

三步注册效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form id="my-form">  
  2.   
  3.         <section name="Step 1">  
  4.           <div>  
  5.             <h2>Essential:</h2>  
  6.             <p>What? Custom file inputs? Oh yeah!</p>  
  7.           </div>  
  8.           <div><label>Username:</label><input id="username" name="username" type="text"/></div>  
  9.           <div><label>Password:</label><input id="pass" name="password" type="password"/></div>  
  10.           <div><label>E-Mail:</label><input id="email" name="email" data-ideal="required email" type="email"/></div>  
  11.           <div><label>Date:</label><input name="date" class="datepicker" data-ideal="date" type="text" placeholder="mm/dd/yyyy"/></div>  
  12.           <div><label>Image:</label><input id="file" name="file" multiple type="file"/></div>  
  13.           <div><label>Website:</label><input name="website" data-ideal="url" type="text"/></div>  
  14.         </section>  
  15.   
  16.         <section name="Step 2">  
  17.           <div>  
  18.             <h2>Options:</h2>  
  19.             <p>Wow, nice radios and checkboxes!</p>  
  20.           </div>  
  21.           <div id="languages">  
  22.             <label>Languages:</label>  
  23.             <label><input type="checkbox" name="langs[]" value="English"/>English</label>  
  24.             <label><input type="checkbox" name="langs[]" value="Chinese"/>Chinese</label>  
  25.             <label><input type="checkbox" name="langs[]" value="Spanish"/>Spanish</label>  
  26.             <label><input type="checkbox" name="langs[]" value="French"/>French</label>  
  27.           </div>  
  28.           <div><label>Radios:</label>  
  29.             <label><input type="radio" name="radio" checked/>One</label>  
  30.             <label><input type="radio" name="radio"/>Two</label>  
  31.             <label><input type="radio" name="radio"/>Three</label>  
  32.           </div>  
  33.         </section>  
  34.   
  35.         <section name="Step 3">  
  36.           <div>  
  37.             <h2>Contact:</h2>  
  38.             <p>What about that handsome select!</p>  
  39.           </div>  
  40.           <div><label>Phone:</label><input type="tel" name="phone" data-ideal="phone"/></div>  
  41.           <div><label>State:</label>  
  42.           <select id="states" name="states">  
  43.             <option value="default">– Select a State –</option>  
  44.             <option value="AL">Alabama</option>  
  45.             <option value="AK">Alaska</option>  
  46.             <option value="AZ">Arizona</option>  
  47.             <option value="AR">Arkansas</option>  
  48.             <option value="CA">California</option>  
  49.             <option value="CO">Colorado</option>  
  50.             <option value="CT">Connecticut</option>  
  51.             <option value="DE">Delaware</option>  
  52.             <option value="DC">District Of Columbia</option>  
  53.             <option value="FL">Florida</option>  
  54.             <option value="GA">Georgia</option>  
  55.             <option value="HI">Hawaii</option>  
  56.             <option value="ID">Idaho</option>  
  57.             <option value="IL">Illinois</option>  
  58.             <option value="IN">Indiana</option>  
  59.             <option value="IA">Iowa</option>  
  60.             <option value="KS">Kansas</option>  
  61.             <option value="KY">Kentucky</option>  
  62.             <option value="LA">Louisiana</option>  
  63.             <option value="ME">Maine</option>  
  64.             <option value="MD">Maryland</option>  
  65.             <option value="MA">Massachusetts</option>  
  66.             <option value="MI">Michigan</option>  
  67.             <option value="MN">Minnesota</option>  
  68.             <option value="MS">Mississippi</option>  
  69.             <option value="MO">Missouri</option>  
  70.             <option value="MT">Montana</option>  
  71.             <option value="NE">Nebraska</option>  
  72.             <option value="NV">Nevada</option>  
  73.             <option value="NH">New Hampshire</option>  
  74.             <option value="NJ">New Jersey</option>  
  75.             <option value="NM">New Mexico</option>  
  76.             <option value="NY">New York</option>  
  77.             <option value="NC">North Carolina</option>  
  78.             <option value="ND">North Dakota</option>  
  79.             <option value="OH">Ohio</option>  
  80.             <option value="OK">Oklahoma</option>  
  81.             <option value="OR">Oregon</option>  
  82.             <option value="PA">Pennsylvania</option>  
  83.             <option value="RI">Rhode Island</option>  
  84.             <option value="SC">South Carolina</option>  
  85.             <option value="SD">South Dakota</option>  
  86.             <option value="TN">Tennessee</option>  
  87.             <option value="TX">Texas</option>  
  88.             <option value="UT">Utah</option>  
  89.             <option value="VT">Vermont</option>  
  90.             <option value="VA">Virginia</option>  
  91.             <option value="WA">Washington</option>  
  92.             <option value="WV">West Virginia</option>  
  93.             <option value="WI">Wisconsin</option>  
  94.             <option value="WY">Wyoming</option>  
  95.           </select>  
  96.         </div>  
  97.         <div><label>Zip:</label><input type="text" name="zip" data-ideal="zip"/></div>  
  98.         <div><label>Comments:</label><textarea id="comments" name="comments"></textarea></div>  
  99.       </section>  
  100.   
  101.       <div><hr/></div>  
  102.   
  103.       <div>  
  104.         <button type="submit">Submit</button>  
  105.         <button id="reset" type="button">Reset</button>  
  106.       </div>  
  107.   
  108.     </form>  

 

JavaScript Code
  1. <script>  
  2.   
  3.   
  4.   
  5.   var options = {  
  6.   
  7.     onFail: function() {  
  8.       alert( $myform.getInvalid().length +' invalid fields.' )  
  9.     },  
  10.   
  11.     inputs: {  
  12.       'password': {  
  13.         filters: 'required pass',  
  14.       },  
  15.       'username': {  
  16.         filters: 'required username',  
  17.         data: {  
  18.           //ajax: { url:'validate.php' }  
  19.         }  
  20.       },  
  21.       'file': {  
  22.         filters: 'extension',  
  23.         data: { extension: ['jpg'] }  
  24.       },  
  25.   
  26.       'comments': {  
  27.         filters: 'min max',  
  28.         data: { min: 50, max: 200 }  
  29.       },  
  30.       'states': {  
  31.         filters: 'exclude',  
  32.         data: { exclude: ['default'] },  
  33.         errors : {  
  34.           exclude: 'Select a State.'  
  35.         }  
  36.       },  
  37.       'langs[]': {  
  38.         filters: 'min max',  
  39.         data: { min: 2, max: 3 },  
  40.         errors: {  
  41.           min: 'Check at least <strong>2</strong> options.',  
  42.           max: 'No more than <strong>3</strong> options allowed.'  
  43.         }  
  44.       }  
  45.     }  
  46.   };  
  47.   
  48.   var $myform = $('#my-form').idealforms(options).data('idealforms');  
  49.   
  50.   $('#reset').click(function(){ $myform.reset().fresh().focusFirst() });  
  51.   $myform.focusFirst();  
  52.   
  53. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_432.html