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="a@qq.com" 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>