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

Posted 2020-11-03 韦书文

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