1.html 代碼為 在input和select同級元素中添加 .error的標簽，用來存放報錯信息

<form action="" method="post" enctype="multipart/form-data" id="sound-dialog-form">
        <div class="form-group">
            <label for="name">名字</label>
            <input type="text" class="form-control" id="name" value="" name="soundname">
            <span id="SoundName-Error" class="error"></span>
        </div>
        <div class="form-group">
        <label for="sound">音頻</label>
        <select name="sound" id="sound">
        <option value="" disabled hidden selected style="font-weight:bold">音頻選擇.....</option>
        <volist name="play_volume" id="play_volume">
            <option value="{$play_volume.name}">{$play_volume.name}</option>
        </volist>
        </select>
        <span id="PlayVolume-Error" class="error"></span>
        </div>
    </form>

2.定義css 樣式 .form-group {position:relative;} .error的定義可參考

.error { position: absolute; top: 50px; left: 73px; color: #fff; background: #e00a0a; font-weight: bold; border: 0; border-radius: 5px; }

3.js部分

// 正則表達式
var reg1 = /^.{1,}$/;  //名稱滿足條件
// alert(window.innerWidth+‘ssssssssss‘+window.innerHeight);
// alert(window.innerHeight);
// 設置音頻信息
function SetAudio($id,name,sound,length,note,volume){
    var tan = layer.open({
        type:1,
        title: ‘編輯聲音‘,
        area:[‘370px‘,‘450px‘],
        offset: ‘50px‘,
        anim: 1,
        content: $("#sound-dialog"),
        btn:[‘保存‘,‘播放‘,‘刪除‘,‘取消‘],
        btn1:function(index){
            // 獲取標簽的值
            var name = $(‘#name‘).val();
            // var length = $(‘#length‘).val();
            var sound = $(‘#sound‘).val();
            var note = $(‘#note‘).val();
            var volumeAmount = $("#volumeAmount").text( $( "#volumeSlider" ).slider( "value" )).text();
            // 聲音名稱的正則
            if(!reg1.test(name)){var SoundNameError=$("#SoundName-Error").text("請輸入正確的名稱");$("#SoundName-Error").css({"padding": "2px 6px 2px 6px"});ErrorName("name",SoundNameError);}
            if(sound===null||sound===""||sound===undefined){var PlayVolumError=$("#PlayVolume-Error").text("請選擇音頻");$("#PlayVolume-Error").css({"padding": "2px 6px 2px 6px"});ErrorVolume("sound",PlayVolumError);return;
            }
            if(!SoundNameError){
                $.ajax({
                    "url": "{:U(‘Sound/EditVolume‘)}",
                    "type": "post",
                    "data": {
                      "action": "EditSound",
                      "id":$id,
                      "name":name,
                      // "length":length,
                      "volumeSlider":volumeAmount,
                      "note":note,
                      "sound":sound
                    },
                    success:function(data){
                        layer.close(index);
                        layer.msg("修改成功!");
                        $("#navside").load("/Sound/index #navside");
                    },
                    error:function (data){
                        layer.msg("設置音頻信息錯誤");
                    }
                })
            }
        },
        btn2:function(index){
            // 音量
           var play_slider_val = Number($("#volumeAmount").text($("#volumeSlider").slider("value")).text());
           // 音頻
           var play_audio_frequency = $("#sound").val();
           if(play_audio_frequency==null){
                layer.msg("請選擇音頻");
           }else{
                // 獲取音頻
                var audios= new ROSLIB.Message({
                        data:play_audio_frequency
                    });
                volume_play.publish(audios);
                //調試音量
                var volumes= new ROSLIB.Message({
                        data:play_slider_val
                    });
                volume_voice.publish(volumes);
                console.log(play_slider_val);
                console.log(play_audio_frequency);
           }
            return false;
        },
        btn3:function(index){
            $.ajax({
                "url": "{:U(‘Sound/EditVolume‘)}",
                "type": "post",
                "data": {
                  "action": "DeleteSound",
                  "id":$id
                },
                success:function(data){
                    layer.close(index);
                    layer.msg("刪除成功！");
                    $("#navside").load("/Sound/index #navside");
                },
                error:function (data){
                    layer.msg("刪除音頻有誤！");
                }
            })
            // return false;
        },
        end:function(){
            // layer.msg("已取消");
        }
    });
    if($id!==undefined){
        // $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
        LabelElement($id,name,sound,note,length,volume);
    }else{
        LabelElement();
        $(".layui-layer-btn2").hide();
    }
}
// slider滑動獲取音量的大小
$( "#volumeSlider" ).slider({
    min: 0,
    max: 100,
    value: 100,
    slide: function( event, ui ) {
        $( "#volumeAmount" ).text( ui.value );
        $( "#sound-volume" ).val( ui.value );
        var slider_display=$( "#volumeAmount" ).text();
        var slider_input= $("#VolumeValue").val(slider_display);
        var slider_val=Number(slider_input.val());//音量
        var audio_frequency = $("#sound").val();//聲音
       if(audio_frequency==null){
            layer.msg("請選擇音頻");
       }else{
        // 音頻
        var number= new ROSLIB.Message({
                data:audio_frequency
            });
        volume_play.publish(number);
        //音量
        var number1= new ROSLIB.Message({
                data:slider_val
            });
        volume_voice.publish(number1);
        console.log(audio_frequency);
        console.log(slider_val);
       }
    }
});
// 獲取元素的值
function LabelElement(id,name,sound,note,length,volume){
    if(id===undefined&
 
&name===undefined&&sound===undefined&&volume===undefined){
        id="";name="";sound="";note="";length="";volume=100;
    }
    $("#name").val(name);
    $("#sound").val(sound);
    $("#sound").prop(‘required‘,false);
    $("#note").val(note);
    // // $(‘#sound-dialog‘).find(‘#length‘).val(length);
    $("#volumeSlider").slider(‘value‘,volume);
    $("#volumeAmount").text( $( "#volumeSlider" ).slider( "value" )).text();
    // 
}
// 隱藏錯誤觸發方式 
function ErrorName(value,error){
    var ErrTxt=error.text();//獲取錯誤信息
    // 按下觸發事件
    $("#"+value).keyup(function(){
        var ValueText=$("#"+value).val();//隨時監測input輸入的值
        ErrorMode(value,ValueText,error,ErrTxt);
    });   
}
// 隱藏錯誤觸發方式
function ErrorVolume(value,error){
    var ErrTxt=error.text();//獲取錯誤信息
    // 點擊觸發事件
    $("#"+value).click(function(){
        var ValueText=$("#"+value).val();//隨時監測input輸入的值
        ErrorMode(value,ValueText,error,ErrTxt);
    });
}
// 錯誤信息處理
function ErrorMode(value,texts,error,errtxt){
    if(texts!==""&
 
&texts!==null&&texts!==undefined){
        error.text("");//清除錯誤信息
        $("#"+value).siblings(".error").css({"padding":"0px"});
    }else{
        // 添加錯誤信息
        $("#"+value).siblings(".error").text(errtxt);
        $("#"+value).siblings(".error").css({"padding":"2px 6px 2px 6px"});
    }
}

效果預覽 鏈接: https://pan.baidu.com/s/1FkZ1DlqG_E_GFLw06HXtkQ 密碼: irdi

js 監測from表單中的input和select，時時監測，沒有輸入或選擇信息報錯，不允許提交數據