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，时时监测，没有输入或选择信息报错，不允许提交数据
原文地址：https://www.cnblogs.com/wsw8384/p/9015733.html