对页面不能为空的检验，在输入框里面提示不能为空的封装

                <form action="">
                    <div class="group">
                        <label for="">留言内容：</label>
                        <textarea name="leave_content"  placeholder="为了更好地服务您，请在此清晰地描述您的问题"></textarea>                        
                    </div>
                    <div class="group">
                        <input type="text" name="email" placeholder="邮箱(选填)" data-value = "邮箱" id="email"/>        
                    </div>
                    <div class="group">
                        <input type="text" name="mobile" placeholder="手机(必填)" data-value = "手机" id="mobile"/>                            
                    </div>    
                    <div class="group">
                        <input type="text" name="name" placeholder="姓名(必填)" data-value = "姓名" id="name"/>                            
                    </div>                        

                </form>

                  <div class="sub">
                    <button>提交</button>
               </div>

          <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            function checkNull(element,sear,checkEvent) {
                var holder = $('#' + element).attr('placeholder');
                var datavalue = $('#' + element).data('value');　　
                if(holder.indexOf(sear) != -1) {
                    var tips = datavalue + '不能为空 *';
                    console.log(tips)
                    let dataval = $('#' + element).val();
                    console.log(dataval)
                    var datas = $('#' + element).parent().find('.redstyle');
                     datas.remove();
                     console.log($.trim(dataval))
                    if($.trim(dataval) == null || $.trim(dataval) == 'undefined' || $.trim(dataval) == '') {
                        var htmls = "<div class='redstyle'>" + tips + "</div>";
                        $('#' + element).parent().append(htmls);
                    }else{
                        console.log(111);
                        if(!!checkEvent){
                            let dbstring = checkEvent(dataval);
                            if(!!dbstring){
                                dbstring = datavalue+dbstring;
                            var htmls = "<div class='redstyle'>" + dbstring + "</div>";
                            $('#' + element).parent().append(htmls);                                
                            }
                        
                        }

                    }　　
                }
            }
            
            function blurenvent(ele,event,sear,checkEvent){
                $('#'+ele).on(event,function(){
                    checkNull(ele,sear,checkEvent);
                })
            }
            
            blurenvent('email','blur','必填',checkEmail);
            blurenvent('mobile','blur','必填',checkMolie);
            blurenvent('name','blur','必填','');

            $('.sub button').click(function() {
                checkNull("email",'必填',checkEmail);
                checkNull("mobile",'必填',checkMolie);
                checkNull("name", '必填','');
            })
            
            
//检查邮箱格式方法
    function checkEmail(str) {
        var re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
        if(re.test(str)){
            return ;
        }else{
            return "格式错误";
        }
    }
    //检查手机格式方法
    function checkMolie(str) {
        var re=/^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+(\d{8})$/;
        if(re.test(str)){
            return ;
        }else{
            return "格式错误";
        }
    }
    //检查电话格式方法
    function checkPhone(str) {
        var re=/^([0-9]{3,4}-)?[0-9]{7,8}$/;
        if(re.test(str)){
            return ;
        }else{
            return "格式错误";
        }
    }
        </script>

发现代码还是比较难读，而且有点bug,下面是重新构建的js，进行了优化

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            function checkNull(element,sear,callback) {
                var holder = $('#' + element).attr('placeholder');
                var datavalue = $('#' + element).data('value');　
                let dataval = $('#' + element).val();　
                var datas = $('#' + element).parent().find('.redstyle');
                datas.remove();
                    if($.trim(dataval) == null || $.trim(dataval) == 'undefined' || $.trim(dataval) == '') {
                        if(holder.indexOf(sear) != -1){
                            tips = datavalue +'不能为空'
                            var htmls = "<div class='redstyle'>" + tips + "</div>";
                            $('#' + element).parent().append(htmls);                            
                        }
                    }else{
                            if (typeof callback === "function"){
                                let dbstring = callback(dataval);
                                if(!!dbstring){
                                    dbstring = datavalue+dbstring;
                                var htmls = "<div class='redstyle'>" + dbstring + "</div>";
                                $('#' + element).parent().append(htmls);                                
                                }
                            
                            }                        
                    }　

            }
            
            function blurenvent(ele,event,sear,checkEvent){
                $('#'+ele).on(event,function(){
                    checkNull(ele,sear,checkEvent);
                })
            }

            var util = {
                checkEmail: function (str) {
                                var re = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                                if(re.test(str)){
                                    return ;
                                }else{
                                    return "格式错误";
                                }
                            },
                checkMolie: function (str) {
                                var re=/^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+(\d{8})$/;
                                if(re.test(str)){
                                    return ;
                                }else{
                                    return "格式错误";
                                }
                            },
                checkPhone:    function (str) {
                                var re=/^([0-9]{3,4}-)?[0-9]{7,8}$/;
                                if(re.test(str)){
                                    return ;
                                }else{
                                    return "格式错误";
                                }
                            }        
            }

            blurenvent('email','blur','必填',util.checkEmail);
            blurenvent('mobile','blur','必填',util.checkMolie);
            blurenvent('name','blur','必填','');

            $('.sub button').click(function() {
                checkNull("email",'必填',util.checkEmail);
                checkNull("mobile",'必填',util.checkMolie);
                checkNull("name", '必填','');
            })


        </script>

好吧，打完收工。。。。。。。