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">姓  名<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">年  龄<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>
