热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

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

1.html代码为在input和select同级元素中添加.error的标签,用来存放报错信息2.定义css样式.form-group{position:relative;}.er

1.html 代码为 在input和select同级元素中添加 .error的标签,用来存放报错信息














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


推荐阅读
  • FroggerTimeLimit:1000MSMemoryLimit:65536KTotalSubmissions:32257Accepted:10396DescriptionFr ... [详细]
  • 3295:[Cqoi2011]动态逆序对Description对于序列A,它的逆序对数定义为满足iAj的数对(i,j)的个数。给1到n的一个排列,按照某种顺序依次删除 ... [详细]
  • 2019.4.14第1001题:SumProblemProblemDescriptionHey,welcometoHDOJ(HangzhouDianziUniversityOnli ... [详细]
  • 22.Container With Most Water(能装最多水的容器)
    thecontainercontainsthemos ... [详细]
  • 代码:在mysql5.6,运行正常,5.7报错SELECTsum((selecta.numwherea.status1))astotalFROMmes_order_productA ... [详细]
  • MyBatis模糊查询和多条件查询一、ISmbmsUserDao层根据姓名模糊查询publicListgetUser();多条件查询publicList ... [详细]
  • 【自制小工具】代码生成器
    【自制小工具】代码生成器陆陆续续接触过好几款代码生成工具,发现确实好用,但都会有那么点不完善的地方,所以索性就自己做一个吧。界面非常简单,反正是自己用的,简单点用起来也方便上图:左 ... [详细]
  • 例子如Table表有性别字段,1代表男2代表女、3代表中性、还有没填就代表未说明selectid,decode(sex,'1','男', ... [详细]
  • 九宫格计算. ... [详细]
  • 6个常见的 PHP 安全性攻击实例和阻止方法_php实例
    这篇文章主要介绍了6个常见的PHP安全性攻击实例和阻止方法,有对这方面感兴趣的小伙伴 ... [详细]
  • 猫猫分享,必须精品原文地址:http:blog.csdn.netu013357243articledetails44571163素材地址:http:download.csdn.n ... [详细]
  • 以SOA服务为导向的信息系统构建是通过有计划地构建信息系统时,一种简单而有柔性的方法,就是组件化与服务导向架构。过去的信息系统,是在使用者需要新功能时才开发的,也就是响应不同时 ... [详细]
  • 接口测试的方式有很多,比如可以用工具(jmeter,postman)之类,也可以自己写代码进行接口测试,工具的使用相对来说都比较简单,重点是要搞清楚项目接口的协议是什么,然后有针对 ... [详细]
  • C#的Type对象的简单应用
    通过Type对象可以获取类中所有的公有成员直接贴代码:classMyClass{privatestringname;privateintid;publicstringcity;pu ... [详细]
  • 作业迁移
    背景:数据库服务器更换,1、数据库迁移(BACKUPRESTORE);2、数据库登录名用户迁移(注意孤立用户);3、作业迁移数据库迁移,备份数据库、拷贝备份文件到新服务器,还原数据 ... [详细]
author-avatar
林小琳LLL
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有