首页 新闻 搜索 专区 学院

layui 表单验证的时候,被验证文本框一般会有橙色高亮显示,我这个为什么没有

0
[待解决问题]
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>预约挂号</title>

    <link href="~/Content/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Content/css/patient_check.css" rel="stylesheet" />
    <script src="~/Content/lib/datatables/media/js/jquery.js"></script>
    <script src="~/Content/lib/layui/layui.js"></script>
    <script src="~/Content/js/common.js"></script>
    @*<script>
            lay('#version').html('-v' + laydate.v);

            //执行一个laydate实例

        </script>*@
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
        font-size: 62.5%;
    }

    a {
        text-decoration: none;
    }

    input {
        border: none;
        outline: none; /* 去掉点击后的边框 */
    }

    body {
        background: url(/Content/img_Patient/bj.jpg) no-repeat fixed;
        background-size: 100% 100%;
    }

    #big {
        margin: 0 auto;
        width: 100rem;
        position: relative;
    }

    .i2 {
        position: absolute;
        right: 0;
        top: 11.7rem;
        width: 20rem;
        height: 24.2rem;
    }

    #zhong {
        position: relative;
        margin: 0 auto;
        height: 100vh;
        overflow-y: scroll; /* 溢出滚动 */
        overflow-x: hidden;
        background-color: #FFFFFF;
        width: 55rem;
    }

    .i1 {
        width: 100%;
    }

    .xf {
        width: 55rem;
        bottom: -0.1rem;
        left: calc(50% - 27.5rem);
        position: fixed;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 不允许换行 */
        white-space: nowrap;
        /* 省略号 */
        text-overflow: ellipsis;
    }

    .xf1 {
        display: flex;
        width: 100%;
        line-height: 7rem;
        font-size: 4.2rem;
        color: #fff;
        align-items: center;
        background: rgba(238, 14, 31, 1);
        justify-content: center;
    }

        .xf1 a {
            color: #FFFFFF;
        }

    .i3 {
        width: 3.8rem;
        height: 4.2rem;
        margin-right: 0.5rem;
    }

    .xf2 {
        line-height: 4.4rem;
        background-color: #FFFFFF;
        text-align: center;
        font-size: 1.485rem;
        color: #c1c1c1;
    }

        .xf2 span {
            color: #4e90ff;
            font-size: 1.485rem;
        }

    h2 {
        font-size: 2.5rem;
        text-align: center;
        margin: 4rem 0 2rem;
    }

    .zz1 {
        position: fixed;
        width: 50rem;
        height: 66rem;
        left: calc(50% - 25rem);
        top: calc(50% - 33rem);
        background-color: #FFFFFF;
        border-radius: 1rem;
        display: none;
        z-index: 2;
    }

    .zz11 {
        width: calc(100% - 8rem);
        height: 44rem;
        padding: 0 4rem 0;
        margin: 5rem auto 0;
        overflow-y: scroll; /* 溢出滚动 */
        overflow-x: hidden;
    }

    .zz12 {
        margin: 5rem auto;
        line-height: 7rem;
        background: #3b9aff;
        color: #fff;
        border: 1px solid #3b9aff;
        border-radius: 1rem;
        font-size: 2.5rem;
        text-align: center;
        width: 21.4rem;
    }

    .p1 {
        font-size: 2.3rem;
        text-align: center;
    }

    .p2 {
        font-size: 2rem;
    }

    .c {
        font-weight: 600;
        ;
    }

    .hhh {
        z-index: 1;
        display: none;
        top: 0;
        left: calc(50% - 27.5rem);
        width: 55rem;
        height: 100vh;
        position: fixed;
        background-color: rgba(0,0,0,0.5);
    }

    .zzl {
        position: fixed;
        width: 50rem;
        height: 66rem;
        left: calc(50% - 25rem);
        top: calc(50% - 33rem);
        background-color: #FFFFFF;
        border-radius: 1rem;
        display: none;
        z-index: 2;
    }

    .zzl1 {
        width: calc(100% - 8rem);
        height: 58rem;
        padding: 0 4rem 0;
        margin: 5rem auto 0;
        overflow-y: scroll; /* 溢出滚动 */
        overflow-x: hidden;
    }

    .zzl2 {
        position: absolute;
        right: 0;
        top: 0;
        width: 5rem;
        height: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: #C1C1C1;
    }

    .zzl1 .p1 {
        font-size: 3rem;
        font-weight: 600;
    }

    .zzl1 .p2 {
        font-size: 1.76rem;
        font-weight: 600;
    }

    form {
        width: 48rem;
        height: 42rem;
        padding: 1rem 3.5rem 0rem 2.75rem;
    }

    .h {
        color: #ff4444;
    }

    .pp {
        color: #808080;
        line-height: 3rem;
        font-size: 2.05rem;
        display: inline-block;
    }

    .r {
        position: absolute;
        right: -1rem;
        top: 0rem;
        font-size: 2rem;
    }

    .dw {
        position: relative;
    }

    .yz {
        color: #ff4444;
        /* display: none; */
        font-size: 1.76rem;
    }

    .layui-input {
        line-height: 4rem;
        width: 100%;
        color: #C1C1C1;
        font-size: 2.05rem;
        border-bottom: #C1C1C1 solid 0.1rem;
        margin: -0.5rem 0 1.5rem 0;
    }

    .in2 {
        line-height: 6.5rem;
        width: 100%;
        color: #fff;
        font-size: 2.3rem;
        background-color: rgb(78, 144, 255);
        font-weight: 600;
    }

    .labe {
        display: flex;
        align-items: center;
        font-size: 2rem;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 不允许换行 */
        white-space: nowrap;
        /* 省略号 */
        text-overflow: ellipsis;
        color: #999;
        margin: 1rem 0;
    }

        .labe input {
            margin-right: 1.5rem;
            width: 2.5rem;
            height: 2.5rem;
        }

    .aaa {
        font-size: 2rem;
        color: rgb(59, 154, 255);
    }
</style>
<body>

    <div id="big">
        <div id="zhong">
            <div class="hhh"></div>
            <img src="https://jsformthemes.biaodan.info/57bd0dad0cf2a1733cc96b9e.png" class="i1">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 1rem;">
                <legend class="layui-title">预约挂号</legend>
                <br />
                <legend class="layui-title" style="font-size:13px">信息会加密以保证您的隐私安全</legend>
            </fieldset>
            <form class="layui-form" action="">
                <input type="hidden" id="projectType" name="projectType" value="test" />
                <p class="pp dw">姓&emsp;&emsp;名<span class="h r">*</span></p>
                <br>
                <input class="layui-input" type="text" name="name" id="name" lay-verify="name" autocomplete="off" placeholder="请输入您的姓名" maxlength="3" />
                <p class="yz"></p>

                <p class="pp dw">年&emsp;&emsp;龄<span class="h r">*</span></p>
                <br>
                <input class="layui-input" type="number" name="age" id="age" lay-verify="age" placeholder="请输入您的实际年龄" maxlength="3" />
                <p class="yz"></p>

                <p class="pp dw" style="margin-top: 0rem;">联系电话<span class="h r">*</span></p>
                <br>
                <input class="layui-input" type="tel" name="phone" id="phone" lay-verify="phone" placeholder="请输入您的联系电话" maxlength="11" />

                <p class="pp dw" style="margin-top: 0rem;">就诊时间<span class="h r">*</span></p>
                <br>
                <input type="text" class="demo-input layui-input" id="ArriveTime" name="clinicdate" lay-verify="date" placeholder="请选择就诊时间" lay-key="1">

                <p class="pp dw" style="margin-top: 0rem;">预约科室<span class="h r">*</span></p>
                <br>
                <select name="keshi" id="keshi" class="layui-input " lay-verify="required">
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>

                <p class="pp dw" style="margin-top: 0rem;">病情描述<span class="h r">*</span></p>
                <br>
                <textarea name="diseasedesc" id="diseasedesc" class="layui-textarea" lay-verify="diseasedesc" rows="3" placeholder="可对自身病情进行简单描述"></textarea>

                @*<input class="in2" type="button" id="bt_Submit" value="确认挂号">*@
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            </form>
            @*<img src="/Content/img_Patient/3.jpg" class="i1">
                <img src="/Content/img_Patient/10.jpg" class="i1">*@
        </div>
    </div>
</body>
<script type="text/javascript">
    //引入layui
    layui.use(['form', 'layedit', 'laydate', 'element', "carousel"], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , element = layui.element
            , laydate = layui.laydate
            , carousel = layui.carousel;

        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 3) {
                    return '请输入您的姓名';
                }
            }
            , age: [/^(([0-9]|[1-9][1-9]|1[0-7][0-9])(\\.[0-9]+)?|180)$/, '请输入您的实际年龄!']
            , phone: [/^1[3|4|5|7|8]\d{9}$/, '请输入11位手机号码!']
            , diseasedesc: function (value) {
                if (isStrNull(diseasedesc) != "") {
                    return '可对自身病情进行简单描述';
                }
            }
        });


        //常规用法
        laydate.render({
            elem: '#ArriveTime' //指定元素
        });




        //监听提交
        form.on('submit(demo1)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

    });

    $(function () {
        isMobile();

    })
    $(function () {
        $('.zzl2').click(function () {
            $('.zzl').hide();
            $('.hhh').hide();
        });
    })
    $(function () {
        $('.xf2').click(function () {
            $('.zz1').show();
            $('.hhh').show();
        });
    })
    $(function () {
        $('.aaa').click(function () {
            $('.zzl').show();
            $('.hhh').show();
        });
    })

    // 锚点跳转动画
    $(".label").bind("click touch", function () {
        //根据a标签的href转换为id选择器,获取id元素所处的位置,并高度减50px(这里根据需要自由设置)
        $('html,body').animate({
            scrollTop: ($($(this).attr('href')).offset().top - 50)
        }, 500);
    });


    function isMobile() {
        var userAgentInfo = navigator.userAgent;
        var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
        var mobile_flag = false;
        //根据userAgent判断是否是手机
        for (var v = 0; v < mobileAgents.length; v++) {
            if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
                mobile_flag = true;
                break;
            }
        }
        var screen_width = window.screen.width;
        var screen_height = window.screen.height;
        //根据屏幕分辨率判断是否是手机
        if (screen_width < 500 && screen_height < 800) {
            mobile_flag = true;
        }

        // 是移动端则点击,不是则按下
        if (mobile_flag) {

            //$('.xf').css('width', '100%').css('left', '0')
            $('.xf1').hide();
            $('#big').css('width', '100%')
            $('#zhong').css('width', '100%')
            $('form').css('width', 'calc(100% - 4rem)').css('padding', '2rem').css('height', '39rem')
            $('form .layui-input,form .in2').css('width', '100%')
            $('form p,form input,.labe,.aaa').css('font-size', '1.5rem')
            $('.labe input').css('width', '1.5rem').css('height', '1.5rem').css('margin-right', '0')
            $('.zzl').css('width', '100%').css('left', 'calc(50% - 50%)')
            $('.zz1').css('width', '100%').css('left', 'calc(50% - 50%)')
            $('.ccc').css('height', '3.5rem')
        }
        return mobile_flag;
    }
</script>
</html>
大da脸的主页 大da脸 | 初学一级 | 园豆:104
提问于:2021-12-14 10:45
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册