Features
| ||
下載: Download (密碼: 見壓縮檔註解) | ||
By dowloading you accept our Terms & Disclaimer. |
Instructions: |
Javascript Code <script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js.js"></script> <script type="text/javascript"> $(function() { // Displaying first list email field $("ul li:first").show(); // Regular Expressions var ck_username = /^[A-Za-z0-9_]{3,20}$/; var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/; // Email validation $('#email').keyup(function() { var email=$(this).val(); if (!ck_email.test(email)) { $(this).next().show().html("Enter valid email"); } else { $(this).next().hide(); $("li").next("li.username").slideDown({duration: 'slow',easing: 'easeOutElastic'}); } }); // Username validation $('#username').keyup(function() { var username=$(this).val(); if (!ck_username.test(username)) { $(this).next().show().html("Min 3 charts no space"); } else { $(this).next().hide(); $("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'}); } }); // Password validation $('#password').keyup(function() { var password=$(this).val(); if (!ck_password.test(password)) { $(this).next().show().html("Min 6 Charts"); } else { $(this).next().hide(); $("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'}); } }); // Submit button action $('#submit').click(function() { var email=$("#email").val(); var username=$("#username").val(); var password=$("#password").val(); if(ck_email.test(email) && ck_username.test(username) && ck_password.test(password) ) { $("#form").show().html("<h1>Thank you!</h1>"); } return false; }); }) </script> HTML Code
<form method="post" > <ul> <li class="email"> <label>Email: </label><br/> <input type="text" name="email" id="email" /> <span class="error"></span> </li> <li class="username"> <label>Username: </label><br/> <input type="text" name="username" id="username" /> <span class="error"></span> </li> <li class="password"> <label>Password: </label><br/> <input type="password" name="password" id="password" /> <span class="error"></span> </li> <li class="submit"> <input type="submit" value=" Register " id='submit'/> </li> </ul> </form> How to add new field If you want to add new field eg: City. It's very simple just follow the step
<li class="city"> <label>City: </label><br/> <input type="text" name="city" id="city" /> <span class="error"></span> </li> City javascript code
// Regular Expression var ck_city = /^[A-Za-z0-9 -]{3,20}$/; // City validation $('#city').keyup(function() { var email=$(this).val(); if (!ck_city.test(email)) { $(this).next().show().html("Enter valid city"); } else { $(this).next().hide(); $("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'}); } }); Final CSS Code
ul { padding:0px; margin:0px; list-style:none; } li { padding:5px; display:none; } label { font-size:14px; font-weight:bold; } input[type="text"], input[type="password"] { border:solid 2px #009900; font-size:14px; padding:4px; width:180px; -moz-border-radius:6px;-webkit-border-radius:6px; } input[type="submit"] { border:solid 1px #ff6600; background-color:#FF6600; color:#fff; font-size:14px; padding:4px; -moz-border-radius:6px;-webkit-border-radius:6px; } .error { font-size:11px; color:#cc0000; padding:4px; } #form { width:350px; margin:0 auto; margin-top:30px; } |
|
0 留言:
發佈留言
您使用留言則表示同意及遵守使用條款及守則。
建議: 為方便留言回覆,請不要用匿名方式 留言。