html中input后的报错信息,js 监测from表单中的input和select,时时监测,没有输入或选择信息报错,不允许提交数据...

这段代码展示了如何在网页中实现音频编辑和播放的功能。通过正则表达式验证用户输入的名称,利用layer弹窗进行界面交互,包括保存、播放、删除和取消操作。同时,使用Ajax处理后台数据交互,对音量进行滑动调整,并通过ROS库控制音频播放和音量。错误处理机制确保了输入的有效性。
摘要由CSDN通过智能技术生成

// 正则表达式

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"});

}

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值