layui layui redio 验证

      发布在:前端技术      评论:0 条评论
<p>layui layui redio 表单提交验证,在使用layui自带的required验证没有效果,于是想到了自定义的方式具体代码如下:</p><pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:&#39;JetBrains Mono&#39;,monospace;font-size:9.8pt;"><span style="color:#e8bf6a;">&lt;div </span><span style="color:#bababa;">class</span><span style="color:#a5c261;">=&quot;layui-form-item&quot;</span><span style="color:#e8bf6a;">&gt;<br/></span><span style="color:#e8bf6a;"> &nbsp; &nbsp;&lt;div </span><span style="color:#bababa;">class</span><span style="color:#a5c261;">=&quot;required f17 gray&quot;</span><span style="color:#e8bf6a;">&gt;</span>2<span style="font-family:&#39;宋体&#39;,monospace;">、您的最高学历?</span><span style="color:#e8bf6a;">&lt;span </span><span style="color:#bababa;">class</span><span style="color:#a5c261;">=&quot;hint&quot;</span><span style="color:#e8bf6a;">&gt;</span><span style="color:#6d9cbe;">&amp;nbsp;</span>(<span style="font-family:&#39;宋体&#39;,monospace;">单选</span>)<span style="color:#e8bf6a;">&lt;/span&gt;&lt;/div&gt;<br/></span><span style="color:#e8bf6a;"> &nbsp; &nbsp;&lt;div&gt;<br/></span><span style="color:#e8bf6a;"> &nbsp; &nbsp; &nbsp; &nbsp;&lt;input </span><span style="color:#bababa;">type</span><span style="color:#a5c261;">=&quot;radio&quot; </span><span style="color:#bababa;">name</span><span style="color:#a5c261;">=&quot;xueli&quot; </span><span style="color:#bababa;">value</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">大专</span><span style="color:#a5c261;">&quot; </span><span style="color:#bababa;">title</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">大专</span><span style="color:#a5c261;">&quot; </span><span style="color:#bababa;">lay-verify</span><span style="color:#a5c261;">=&quot;isrequired&quot;<br/></span><span style="color:#a5c261;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color:#bababa;">lay-reqText</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">请您选择您的最高学历</span><span style="color:#a5c261;">&quot;</span><span style="color:#e8bf6a;">&gt;<br/></span><span style="color:#e8bf6a;"> &nbsp; &nbsp; &nbsp; &nbsp;&lt;input </span><span style="color:#bababa;">type</span><span style="color:#a5c261;">=&quot;radio&quot; </span><span style="color:#bababa;">name</span><span style="color:#a5c261;">=&quot;xueli&quot; </span><span style="color:#bababa;">value</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">本科</span><span style="color:#a5c261;">&quot; </span><span style="color:#bababa;">title</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">本科</span><span style="color:#a5c261;">&quot; </span><span style="color:#bababa;">lay-verify</span><span style="color:#a5c261;">=&quot;isrequired&quot;<br/></span><span style="color:#a5c261;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color:#bababa;">lay-reqText</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">请您选择您的最高学历</span><span style="color:#a5c261;">&quot;</span><span style="color:#e8bf6a;">&gt;<br/></span><span style="color:#e8bf6a;"> &nbsp; &nbsp; &nbsp; &nbsp;&lt;input </span><span style="color:#bababa;">type</span><span style="color:#a5c261;">=&quot;radio&quot; </span><span style="color:#bababa;">name</span><span style="color:#a5c261;">=&quot;xueli&quot; </span><span style="color:#bababa;">value</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">研究生及以上</span><span style="color:#a5c261;">&quot; </span><span style="color:#bababa;">title</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">研究生及以上</span><span style="color:#a5c261;">&quot; </span><span style="color:#bababa;">lay-verify</span><span style="color:#a5c261;">=&quot;isrequired&quot;<br/></span><span style="color:#a5c261;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color:#bababa;">lay-reqText</span><span style="color:#a5c261;">=&quot;</span><span style="color:#a5c261;font-family:&#39;宋体&#39;,monospace;">请您选择您的最高学历</span><span style="color:#a5c261;">&quot;</span><span style="color:#e8bf6a;">&gt;<br/></span><span style="color:#e8bf6a;"> &nbsp; &nbsp;&lt;/div&gt;<br/></span><span style="color:#e8bf6a;">&lt;/div&gt;</span></pre><pre style="background-color:#2b2b2b;color:#a9b7c6;font-family:&#39;JetBrains Mono&#39;,monospace;font-size:9.8pt;"><span style="color:#808080;">//</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">自定义验证规则<br/></span>form.<span style="color:#ffc66d;">verify</span>({<br/> <span style="color:#ffc66d;">ischinese</span>: <span style="color:#cc7832;">function </span>(value) {<br/> <span style="color:#cc7832;">if </span>(!<span style="color:#6897bb;">/</span><span style="color:#6897bb;background-color:#364135;">^[\u4e00-\u9fa5]+$</span><span style="color:#6897bb;">/</span>.<span style="color:#ffc66d;">test</span>(value)) {<br/> <span style="color:#cc7832;">return </span><span style="color:#6a8759;">&#39;</span><span style="color:#6a8759;font-family:&#39;宋体&#39;,monospace;">只能输入中文</span><span style="color:#6a8759;">&#39;</span><span style="color:#cc7832;">;<br/></span><span style="color:#cc7832;"> &nbsp; &nbsp; &nbsp; &nbsp;</span>}<br/> }<span style="color:#cc7832;">, </span><span style="color:#ffc66d;">isrequired</span>: <span style="color:#cc7832;">function </span>(value<span style="color:#cc7832;">, </span>item) {<br/> <span style="color:#808080;">//</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">解决</span><span style="color:#808080;">radio</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">无法校验问题<br/></span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color:#cc7832;">var </span>verifyName = $(item).<span style="color:#ffc66d;">attr</span>(<span style="color:#6a8759;">&#39;name&#39;</span>)<br/> <span style="color:#cc7832;">, </span>verifyType = $(item).<span style="color:#ffc66d;">attr</span>(<span style="color:#6a8759;">&#39;type&#39;</span>)<br/> <span style="color:#cc7832;">, </span>reqText = $(item).<span style="color:#ffc66d;">attr</span>(<span style="color:#6a8759;">&#39;lay-reqText&#39;</span>)<br/> <span style="color:#cc7832;">, </span>formElem = $(item).<span style="color:#ffc66d;">parents</span>(<span style="color:#6a8759;">&#39;</span><span style="color:#6a8759;background-color:#364135;">.layui-form</span><span style="color:#6a8759;">&#39;</span>)<span style="color:#808080;">//</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">获取当前所在的</span><span style="color:#808080;">form</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">元素,如果存在的话<br/></span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color:#cc7832;">, </span>verifyElem = formElem.<span style="color:#ffc66d;">find</span>(<span style="color:#6a8759;">&#39;input[name=&#39; </span>+ verifyName + <span style="color:#6a8759;">&#39;]&#39;</span>)<span style="color:#808080;">//</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">获取需要校验的元素<br/></span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color:#cc7832;">, </span>isTrue = verifyElem.<span style="color:#ffc66d;">is</span>(<span style="color:#6a8759;">&#39;:checked&#39;</span>)<span style="color:#808080;">//</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">是否命中校验<br/></span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color:#cc7832;">, </span>focusElem = verifyElem.<span style="color:#ffc66d;">next</span>().<span style="color:#ffc66d;">find</span>(<span style="color:#6a8759;">&#39;i.layui-icon&#39;</span>)<span style="color:#cc7832;">;</span><span style="color:#808080;">//</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">焦点元素<br/></span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;"> &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color:#cc7832;">if </span>(!isTrue || !value) {<br/> <span style="color:#808080;">//</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">定位焦点<br/></span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>focusElem.<span style="color:#ffc66d;">css</span>(verifyType == <span style="color:#6a8759;">&#39;radio&#39; </span>? {<span style="color:#6a8759;">&quot;color&quot;</span>: <span style="color:#6a8759;">&quot;</span><span style="color:#6a8759;background-color:#364135;">#FF5722</span><span style="color:#6a8759;">&quot;</span>} : {<span style="color:#6a8759;">&quot;border-color&quot;</span>: <span style="color:#6a8759;">&quot;</span><span style="color:#6a8759;background-color:#364135;">#FF5722</span><span style="color:#6a8759;">&quot;</span>})<span style="color:#cc7832;">;<br/></span><span style="color:#cc7832;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="color:#808080;">//</span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;">对非输入框设置焦点<br/></span><span style="color:#808080;font-family:&#39;宋体&#39;,monospace;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>focusElem.<span style="color:#ffc66d;">first</span>().<span style="color:#ffc66d;">attr</span>(<span style="color:#6a8759;">&quot;tabIndex&quot;</span><span style="color:#cc7832;">, </span><span style="color:#6a8759;">&quot;1&quot;</span>).<span style="color:#ffc66d;">css</span>(<span style="color:#6a8759;">&quot;outline&quot;</span><span style="color:#cc7832;">, </span><span style="color:#6a8759;">&quot;0&quot;</span>).<span style="color:#ffc66d;">blur</span>(<span style="color:#cc7832;">function </span>() {<br/> focusElem.<span style="color:#ffc66d;">css</span>(verifyType == <span style="color:#6a8759;">&#39;radio&#39; </span>? {<span style="color:#6a8759;">&quot;color&quot;</span>: <span style="color:#6a8759;">&quot;&quot;</span>} : {<span style="color:#6a8759;">&quot;border-color&quot;</span>: <span style="color:#6a8759;">&quot;&quot;</span>})<span style="color:#cc7832;">;<br/></span><span style="color:#cc7832;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>}).<span style="color:#ffc66d;">focus</span>()<span style="color:#cc7832;">;<br/></span><span style="color:#cc7832;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return </span>reqText ? reqText : <span style="color:#6a8759;">&#39;</span><span style="color:#6a8759;font-family:&#39;宋体&#39;,monospace;">必填项必须选择</span><span style="color:#6a8759;">&#39;</span><span style="color:#cc7832;">;<br/></span><span style="color:#cc7832;"> &nbsp; &nbsp; &nbsp; &nbsp;</span>}<br/><br/> }<br/>})<span style="color:#cc7832;">;</span></pre><p><br/></p>
相关文章

Layui 表格在固定列(特别是 fixed: 'right' 的操作列)中,行高不一致的问题。这种现象通常出现在:某些单元格内容较多,导致行高被撑开;固定列(右侧操作列)没有同步主表格的行高,导致错位或高度不一致。✅ 问题本质Layui 的固定列实现方式是克隆一份表格 DOM,然后通过定位覆盖在原表格上。但由于内容不同步,主表格行高变化时,固定列不会自动同步更新,从而导

layui 设置table的行的高度有内容撑开的方法,直接使用css代码就可以解决,具体如下 /* 让单元格内容自动换行并撑开高度 */.layui-table-cell { height: auto !important; white-space: normal !important; overflow: visible !important; text-overfl

首先添加样式类.table-header-fixed { top: 0; position: fixed; z-index: 999;}在table表格渲染完后,增加js代码如下var headerTop = $('.layui-table-header').offset().top; //获取表格头到文档顶部的距离$(window).scroll(functio

在数据表格上,操作按钮太多的时候,页面展示不全,下拉显示所有按钮时,点击无效。需要在js中添加代码,放在layui.use()里面即可。$(document).off('mousedown', '.layui-table-grid-down') .on('mousedown', '.layui-table-grid-down&#

layuimini后台点击右侧菜单实现重新加载页面

`layui-disabled` 类和 `readonly` 属性都是用来禁用表单元素的,但是它们的作用有所不同。`layui-disabled` 类是 layui 自定义的禁用样式类,它可以禁用表单...

热门推荐