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="[email protected]" 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>