layui---表單驗證

使用layui，使用它的表單驗證也是比不可少的，下面就來總結下： 

<!-- 不用form 用div也可以 -->
<form class="layui-form" lay-filter="form-box">
    <div class="layui-form-item">
        <label class="layui-form-label">必填</label>
        <div class="layui-input-inline">
            <input type="text" name="username" lay-verify="required" value="123" placeholder="請輸入" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux layui-inline">必填項做驗證</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">郵箱</label>
        <div class="layui-input-inline">
            <input type="text" name="email" lay-verify="email" value="[e-mail]" placeholder="請輸入" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux layui-inline">必填項做驗證</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手機</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" lay-verify="phone" value="18314416390" placeholder="請輸入" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux layui-inline">必填項做驗證</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">數字</label>
        <div class="layui-input-inline">
            <input type="text" name="number" lay-verify="number" lay-verType="tips" value="3" placeholder="請輸入" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux layui-inline">吸附驗證</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分數</label>
        <div class="layui-input-inline">
            <input type="text" name="score" lay-verify="score" lay-verType="tips" value="60" placeholder="請輸入" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux layui-inline">自定義驗證規則</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">長度</label>
        <div class="layui-input-inline">
            <input type="text" name="length" lay-verify="length" lay-verType="tips" value="1234567" placeholder="請輸入" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux layui-inline">自定義驗證規則</div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="form-submit" lay-submit>提交</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="./layui/layui.js"></script>
<script type="text/javascript">
/**
 * 1、要想使用layui的表單驗證，需要在提交按鈕上設置 lay-submit 屬性，才會觸發layui的驗證規則。
 * 2、form.on('submit(form-submit)') 這里監聽表單提交獲取數據 這個 lay-filter="form-submit" 是放置到提交 class="layui-btn" 按鈕上，而不是form上。
 * 3、form.value('form-box',{}); 這里的設置默認表單數據 這個 lay-filter="form-box" 是放置到 class="layui-form" 上的
 */
var verify = {
    score:function(value,item){
        if(value < 60){
            return '分數必須大於60';
        };
    },
    length:[/^[\S]{6,12}$/,'長度必須是6到12位']
};
layui.use('form', function(){
    var form = layui.form;
    form.verify(verify);
    form.on('submit(form-submit)',function(data){
        console.log('我提交了');
        console.log(data.field); // 表單數據 {name:value}
        // console.log(data.elem) //被執行事件的元素DOM對象，一般為button對象
        // console.log(data.form) //被執行提交的form對象，一般在存在form標簽時才會返回
        // console.log(data.field) //當前容器的全部表單字段，名值對形式：{name: value}
        return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。
        // 用於提交成功初始化表單
        form.val("form-box",{
            'username':'',
        });
    });
});
</script>