#1 layer.js与layui.js操作之提示框的使用

一、引用js和css

<script src="${pageContext.request.contextPath}/layer-v3.1.1/layer/layer.js"></script>
<script src="${pageContext.request.contextPath}/layui-v2.3.0/layui/layui.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.3.0/layui/css/layui.css">

二、定义提示框方法

/**
 @functionname:_tips
 @description:表单提交前错误信息提示
 @author:yzh
 @param:content：提示框的内容
 @parm:seletor：选择器
 @date:2018-09-01
*/
function _tips(content,seletor){
    layer.tips(
        "<span style='color:#FFFFFF'><i style='font-size:18px;color:yellow' class='icon iconfont icon-jinggaoTips'></i>"+content+"</span>", 
        seletor, 
        {
            tips: [2, '#FF6666'], //#007799设置tips方向和颜色 类型：Number/Array，默认：2 tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, '#c00']
            tipsMore: false, //是否允许多个tips 类型：Boolean，默认：false 允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启
            time:3000,  //2秒后销毁
            icon:1
        }
    );
}

三、应用：构建表单验证器

/**
 @functionname:validator
 @description:表单提交前验证
 @author:yzh
 @param:form
 @date:2018-09-01
*/
function validator(form){
    var o = $(form+" input");
    var formInputArr = [];
    for(var i = 0;i<o.length;i++){
        //将所有表单的name属性push到数组中
        formInputArr.push(o.get(i).name);
    }

    for(var i = 0;i<formInputArr.length;i++){
        var _o = $(form+" input"+"[name="+formInputArr[i]+"]");
        //判断表单是否为空，
        //_o.prop()获取自定义属性值(用于布尔值的获取)
        if(_o.val() == '' && _o.prop("required") ==true){
            _tips(_o.attr("placeholder"),_o);
            //break;
            return false;
        };
        //正则匹配
        if(!(new RegExp(_o.attr("regexp")).test(_o.val()))){
            _tips(_o.attr("regexpValue"),_o);
            return false;
        } 
    }
    return true;
}
说明：该表单验证器可以支持required=true属性和正则表达式属性regexpValue=正则表达式验正，你只需要在input表添加这两个属性即可激活验证。

四、测试
测试结果如下所示。