用layUI框架來進行我們的頁面速寫,還是非常不錯的,雖然2016年誕生,在我使用的過程中,覺得比bootstrap更輕盈點,總結下用的最多的組件.
form表單下拉框:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>layui前端框架學習(一)表單</title> 6 <link rel="stylesheet" href="./layui/css/layui.css"> 7 </head> 8 <body> 9 <div id="wrap"> 10 <div class="layui-form"> 11 <div class="layui-form-item"> 12 <div class="layui-input-block"> 13 <select name="city" lay-verify="required" lay-filter="test"> 14 <option value=""></option> 15 <option value="0">北京</option> 16 <option value="1">上海</option> 17 <option value="2">廣州</option> 18 <option value="3">深圳</option> 19 <option value="4">杭州</option> 20 </select> 21 </div> 22 </div> 23 </div> 24 </div> 25 </div> 26 <div id="box"></div> 27 </body> 28 <script src="./layui/layui.js"></script> 29 <script src="./layui/layer/layer.js"></script> 30 <script src="jquery-1.8.3.min.js"></script> 31 <script> 32 layui.use('form', function(){ 33 var form = layui.form; 34 form.on('select(test)', function(data){ 35 console.log(data.elem); //得到select原始DOM對象 36 console.log(data.value); //得到被選中的值 37 console.log(data.othis); //得到美化后的DOM對象 38 var value=(data.value==0)?'北京':((data.value==1)?'上海':((data.value==2)?'廣州':((data.value==3)?'深圳':'杭州'))); 39 $('#box').html(value); 40 }); 41 }); 42 </script> 43 </html>
以上代碼是form表單中的下拉框為主角,js代碼表示依賴form組件,並監聽lay-filter="test"這個下拉框,當選擇哪個值時,獲得對應的值.
form表單switch開關:
1 <div class="layui-form"> 2 <div class="layui-form-item"> 3 <label class="layui-form-label">開關</label> 4 <div class="layui-input-block" lay-filter="test"> 5 <input type="checkbox" name="switch" lay-skin="switch" lay-filter="test"> 6 </div> 7 </div> 8 </div>
1 layui.use('form', function(){ 2 var form = layui.form; 3 form.on('switch(test)', function(data){ 4 console.log(data.elem); //得到checkbox原始DOM對象 5 console.log(data.elem.checked); //開關是否開啟，true或者false 6 console.log(data.value); //開關value值，也可以通過data.elem.value得到 7 console.log(data.othis); //得到美化后的DOM對象 8 }) 9 });
form表單復選框:
1 <div class="layui-form"> 2 <div class="layui-form-item"> 3 <label class="layui-form-label">復選框</label> 4 <div class="layui-input-block"> 5 <input type="checkbox" name="like[write]" title="寫作" lay-filter="test"> 6 <input type="checkbox" name="like[read]" title="閱讀" lay-filter="test"> 7 <input type="checkbox" name="like[dai]" title="發呆" lay-filter="test"> 8 </div> 9 </div> 10 </div>
1 layui.use('form', function(){ 2 var form = layui.form; 3 form.on('checkbox(test)', function(data){ 4 console.log(data.elem); //得到checkbox原始DOM對象 5 console.log(data.elem.checked); //是否被選中，true或者false 6 console.log(data.value); //復選框value值，也可以通過data.elem.value得到 7 console.log(data.othis); //得到美化后的DOM對象 8 }); 9 });
form表單單選radio:
1 <div class="layui-form"> 2 <div class="layui-form-item"> 3 <label class="layui-form-label">單選框</label> 4 <div class="layui-input-block"> 5 <input type="radio" name="sex" value="男" title="男" lay-filter="test"> 6 <input type="radio" name="sex" value="女" title="女" checked lay-filter="test"> 7 </div> 8 </div> 9 </div>
1 layui.use('form', function(){ 2 var form = layui.form; 3 form.on('radio(test)', function(data){ 4 console.log(data.elem); //得到radio原始DOM對象 5 console.log(data.value); //被點擊的radio的value值 6 }); 7 });
form表單驗證:
對表單的驗證進行了非常巧妙的支持，大多數時候你只需要在表單元素上加上 lay-verify="" 屬性值即可。如：
1 <input type="text" lay-verify="email"> 2 3 還同時支持多條規則的驗證，如下： 4 <input type="text" lay-verify="required|phone|number">
上述對輸入框定義了一個郵箱規則的校驗，它會在 form 模塊內部完成。目前我們內置的校驗支持見上文的：預設元素屬性
除了內置的校驗規則外，你還可以自定義驗證規則，通常對於比較復雜的校驗，這是非常有必要的。
語法:
1 form.verify({ 2 username: function(value, item){ //value：表單的值、item：表單的DOM對象 3 if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){ 4 return '用戶名不能有特殊字符'; 5 } 6 if(/(^\_)|(\__)|(\_+$)/.test(value)){ 7 return '用戶名首尾不能出現下划線\'_\''; 8 } 9 if(/^\d+\d+\d$/.test(value)){ 10 return '用戶名不能全為數字'; 11 } 12 } 13 14 //我們既支持上述函數式的方式，也支持下述數組的形式 15 //數組的兩個值分別代表：[正則匹配、匹配不符時的提示文字] 16 ,pass: [ 17 /^[\S]{6,12}$/ 18 ,'密碼必須6到12位，且不能出現空格' 19 ] 20 });
當你自定義了類似上面的驗證規則后，你只需要把key賦值給輸入框的 lay-verify 屬性即可：
1 <input type="text" lay-verify="username" placeholder="請輸入用戶名"> 2 <input type="password" lay-verify="pass" placeholder="請輸入密碼">
補充一點:實際項目中可能為了安全很多用form提交驗證,大多是用ajax發送數據,感興趣的小伙伴可以看下我另一篇關於ajax的封裝文章,是小編自己在項目實踐中,總結和封裝的一些ajax方法,如有疑問歡迎留言。