特效描述:注冊表單驗證 提示信息 帶步驟注冊表單,jquery+html5注冊頁面
代碼結構
1. 引入CSS
<link href="css/normalize.css" rel="stylesheet"/> <link href="css/jquery-ui.css" rel="stylesheet"/> <link href="css/jquery.idealforms.min.css" rel="stylesheet" media="screen"/>
2. 引入JS
<script src="js/html5shiv.js"></script> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui.min.js"></script> <script type="text/javascript" src="js/jquery.idealforms.js"></script>
3. HTML代碼
<div class="row"> <div class="eightcol last"> <!-- Begin Form --> <form id="my-form"> <section name="第一步"> <div><label>用戶名:</label><input id="username" name="username" type="text"/></div> <div><label>密碼:</label><input id="pass" name="password" type="password"/></div> <div><label>郵箱:</label><input id="email" name="email" data-ideal="required email" type="email"/></div> <div><label>出生日期:</label><input name="date" class="datepicker" data-ideal="date" type="text" placeholder="月/日/年"/></div> <div><label>上傳頭像:</label><input id="file" name="file" multiple type="file"/></div> <div><label>個人主頁:</label><input name="website" data-ideal="url" type="text"/></div> </section> <section name="第二步"> <div id="languages"> <label>語言:</label> <label><input type="checkbox" name="langs[]" value="English"/>英文</label> <label><input type="checkbox" name="langs[]" value="Chinese"/>中文</label> <label><input type="checkbox" name="langs[]" value="Spanish"/>西班牙文</label> <label><input type="checkbox" name="langs[]" value="French"/>法文</label> </div> <div><label>精通幾門:</label> <label><input type="radio" name="radio" checked/>1</label> <label><input type="radio" name="radio"/>2</label> <label><input type="radio" name="radio"/>3</label> <label><input type="radio" name="radio"/>4</label> </div> </section> <section name="第三步"> <div><label>電話:</label><input type="tel" name="phone" data-ideal="phone"/></div> <div><label>國籍:</label> <select id="states" name="states"> <option value="default">– 選擇國籍 –</option> <option value="AL">阿拉伯</option> <option value="AK">中國</option> <option value="AZ">美國</option> <option value="AR">法國</option> <option value="CA">英國</option> <option value="CO">德國</option> <option value="CT">西班牙</option> <option value="DE">俄羅斯</option> </select> </div> <div><label>郵編:</label><input type="text" name="zip" data-ideal="zip"/></div> <div><label>備注:</label><textarea id="comments" name="comments"></textarea></div> </section> <div><hr/></div> <div> <button type="submit">提交</button> <button id="reset" type="button">重置</button> </div> </form> <!-- End Form --> </div> </div> <script type="text/javascript"> var options = { onFail: function(){ alert( $myform.getInvalid().length +' invalid fields.' ) }, inputs: { 'password': { filters: 'required pass', }, 'username': { filters: 'required username', data: { //ajax: { url:'validate.php' } } }, 'file': { filters: 'extension', data: { extension: ['jpg'] } }, 'comments': { filters: 'min max', data: { min: 50, max: 200 } }, 'states': { filters: 'exclude', data: { exclude: ['default'] }, errors : { exclude: '選擇國籍.' } }, 'langs[]': { filters: 'min max', data: { min: 2, max: 3 }, errors: { min: 'Check at least <strong>2</strong> options.', max: 'No more than <strong>3</strong> options allowed.' } } } }; var $myform = $('#my-form').idealforms(options).data('idealforms'); $('#reset').click(function(){ $myform.reset().fresh().focusFirst() }); $myform.focusFirst(); </script>