ajax提交表单 required 无效

最新推荐文章于 2023-03-24 10:33:55 发布

顾米楠

最新推荐文章于 2023-03-24 10:33:55 发布

阅读量1.1k

点赞数

分类专栏： JavaScript 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_38350907/article/details/104924373

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

荆轲刺秦王

在前端用户提交表单的时候，我们经常会加一些验证，例如数字在 0-100 不能输入空格等等

本文实现的例子有：1.输入框不能输入空格 2.bootstrap状态开关按钮

<!DOCTYPE html>
<html>
<head>
    {include file="public/head"}
    <style>
        .bk20{width: 100%;height: 20px;}
    </style>
    <link href="https://cdn.staticfile.org/ionic/1.3.2/css/ionic.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/ionic/1.3.2/js/ionic.bundle.min.js"></script>
</head>

<body class="" style="margin-top: 10px">
<div class="tabs-panel">
    <div class="">
        <form id="data-form" class="form-horizontal">
            <div class="bk20"></div>
            <div class="form-group">
                <label class="col-sm-3 col-xs-3 control-label text-right">开关控制</label>
                <div class="col-sm-8 col-xs-8">
                    <label class="toggle toggle-positive">
                        <input type="checkbox" id="ipt">
                            <div class="track">
                                <div class="handle"></div>
                            </div>
                    </label>
                </div>
            </div>
            <div class="bk20"></div>
            <div class="form-group">
                <label class="col-sm-3 col-xs-3 control-label text-right">电话内容</label>
                <div class="col-sm-8 col-xs-8">
                    <textarea id="speech_content" name="speech_content" placeholder="{$data['speech_content']}" style="width:100%;height:100px;border:1px solid #000000;padding: 10px 10px;">{$data['speech_content']}</textarea>
                </div>
            </div>
            <div class="bk20"></div>
            <div class="form-group">
                <label class="col-sm-3 col-xs-3 control-label text-right">激活客群条件</label>
                <div class="col-sm-8 col-xs-8">
                        <span>用户注册后</span><input name="speech_time" id="speech_time" class="form-control" value="{$data.speech_time}"  style="width:10%;display: inline-block;padding-left: 10px;border:0.5px solid #000000;margin: 0px 10px;height: 2em;" oninput="this.value=this.value.replace(/\s+/g,'')" ><span>小时，且创造的甲方UV≤</span><input name="speech_uv_num" id="speech_uv_num" class="form-control" value="{$data.speech_uv_num}" style="width:10%;display: inline-block;padding-left: 10px;border:0.5px solid #000000;margin: 0px 10px;height: 2em;" oninput="this.value=this.value.replace(/\s+/g,'')" ><span>自动拨打激活电话</span>
                </div>
            </div>

            

            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <input type="hidden" name="is_open_speech" class="form-control" value="{$data.is_open_speech}" id="is_open_speech">
                <div class="col-sm-12 col-xs-12 text-center">
                    <button type="button" id="submit-btn" class="btn btn-primary">保存内容</button>
                    <button type="button" id="close-btn" class="btn btn-white">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>
{include file="public/js"}


<script>
    

    $(document).ready(function () {

        $(document).on("input propertychange","#speech_time",function(){
            var limitNum = $(this).val().replace(/[^0-9.]+/g, "");
            if(limitNum>0&&limitNum<=100){
                $(this).val(limitNum);
            }else{
                $(this).val("");
            }
        })

        $(document).on("input propertychange","#speech_uv_num",function(){
            var limitNum = $(this).val().replace(/[^0-9.]+/g, "");
            if(limitNum>0&&limitNum<=10){
                $(this).val(limitNum);
            }else{
                $(this).val("");
            }
        })

        var is_open_speech = "{$data.is_open_speech}";
        if(is_open_speech == 1){
            $("#ipt").prop("checked",false)
        }else if (is_open_speech == 2 ) {
            $("#ipt").prop("checked",true)
        }

        $('#submit-btn').on('click', function (e) {
            var val = $("#ipt").is(":checked");  // true / false
            if ( val ) {
                $("#is_open_speech").val("2")
            }else{
                $("#is_open_speech").val("1")
            }

            if($('#speech_time').val()==""){
                layer.alert('注册间隔不能为空');
                return false;
            }
            if($('#speech_uv_num').val()==""){
                layer.alert('UV数量不能为空');
                return false;
            }

            var param = $('#data-form').serialize();

            $.post("./speech_settings.html", param, function (res) {
                if (res.state == 0) {
                    layer.msg(res.msg,{icon:1,time:1000}, function (index) {
                        parent.resetTable();
                        window.parent.layer.closeAll();
                    })
                } else {
                    layer.alert(res.msg);
                }
            });
        });

    });
</script>



</body>
</html>

顾米楠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax提交表单 required 无效

荆轲刺秦王在前端用户提交表单的时候，我们经常会加一些验证，例如数字在 0-100 不能输入空格等等本文实现的例子有：1.输入框不能输入空格 2.bootstrap状态开关按钮<!DOCTYPE html><html><head> {include file="public/head"} <style> ...
复制链接

扫一扫