layui单选必填验证

news2024/11/19 7:45:11

效果:
在这里插入图片描述
代码
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<div class="layui-form-item">
   <label class="layui-form-label layui-required-title">对此次活动内容输出是否满意?</label>
    <div class="layui-input-block">
        <input type="radio" name="activityContent" value="1" title="是" lay-verify="radioReq">
        <input type="radio" name="activityContent" value="0" title="否" lay-verify="radioReq">
    </div>
</div>

//自定义验证规则
form.verify({
    // 单选
    radioReq: function(value,item){
        let $ = layui.$;
        let verifyName=$(item).attr('name')
            , verifyType=$(item).attr('type')
            ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素,如果存在的话
            ,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
            ,isTrue= verifyElem.is(':checked')//是否命中校验
            ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
        if(!isTrue || !value){
            //定位焦点
            focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
            //对非输入框设置焦点
            focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
                focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
            }).focus();
            return '必填项不能为空';
        }
    }
});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/886334.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

int(M)、char(M) 、varchar(M)的用法

文章目录 MySQL中int、char、varchar的一般用法1、int (M)2、varchar(M)3、char(M)4、char(M) 和varchar(M)的区别4.1 区别1&#xff1a;定长和变长4.2 区别2&#xff1a;存储容量上4.3 区别3&#xff1a;在展示上4.4 区别4&#xff1a;在使用场景上4.5 区别5&#xff1a;在书写…

如何编写技术文档?

软件开发中&#xff0c;为你的软件系统编写文档并不是一件新鲜的事情。几乎所有人都明白这样的道理&#xff1a; 你的软件产品如何优秀对用户来说并不是最重要的&#xff0c;因为你的文档如果不够优秀&#xff0c;用户不会使用它&#xff01;即便用户在某些情况下不得不使用你…

uniapp app 实现右上角回首页;点homeButton返回上一页;onNavigationBarButtonTap不生效问题

场景&#xff1a; app&#xff0c;Android移动端 实现点击右上角图标&#xff0c;回首页。 问题&#xff1a;用了官网的 homeButton&#xff0c;图标正常展示了&#xff0c;也可点击&#xff0c;但每次点击后是会返回上一页而非首页。 后来查到说&#xff0c;要结合onNavigatio…

SciencePub学术 | 计算机重点SCIE征稿中

SciencePub学术 刊源推荐: 计算机重点SCIE征稿中&#xff01;信息如下&#xff0c;录满为止&#xff1a; 一、期刊概况&#xff1a; 计算机语音类重点SCIE 【期刊简介】IF&#xff1a;4.0-4.5&#xff0c;JCR2区&#xff0c;中科院3区&#xff1b; 【出版社】世界排名前三出…

Mysql之explain详解

1. explain作用 使用explain可以展示出sql语句的执行计划&#xff0c;再根据sql的执行计划去判断这条sql有哪些点可以进行优化&#xff0c;从而让sql的效率达到最大化。 2. 执行计划各列含义 &#xff08;1&#xff09;id&#xff1a;id列是select的序列号&#xff0c;这个…

Docker基础入门:从0开始学习容器化技术

Docker基础入门&#xff1a;从零开始学习容器化技术 一、Docker基础1.1、Docker起源1.2、Docker概念1.3、Docker优势1.4、Docker 的组成 二、Docker安装2.1、卸载旧版Docker2.2、需要的安装包依赖2.3、设置镜像仓库2.4、更新yum软件包索引2.5、安装Docker--社区版2.6、配置镜像…

十、接口(2)

本章概要 抽象类和接口完全解耦多接口结合使用继承扩展接口 结合接口时的命名冲突 抽象类和接口 尤其是在 Java 8 引入 default 方法之后&#xff0c;选择用抽象类还是用接口变得更加令人困惑。下表做了明确的区分&#xff1a; 特性接口抽象类组合新类可以组合多个接口只能…

Java基础知识实际应用(学生信息管理系统、猜拳小游戏、打印日历)

一、Java学生信息管理系统 这个系统包含了添加、修改、删除、查询和显示所有学生信息等功能。您可以在此基础上进行修改和完善&#xff0c;以适应您的需求。 import java.util.Scanner;public class StudentManagementSystem {private static Scanner scanner new Scanner(S…

C++——oo的魅力之多态

文章目录 多态的概念多态的定义和实现多态的构成条件虚函数重写的两个例外协变(基类和派生类虚函数返回值类型不同)析构函数的重写(基类和派生类析构函数名字不同) c11 override 和 final关键字 重载&#xff0c;重写(覆盖)&#xff0c; 隐藏(重定义)对比抽象类(纯虚函数)多态的…

Vivado使用入门之二:网表物理约束

目录 一、背景 二、物理约束 2.1 概念 2.2 网表约束 2.2.1 CLOCK_DEDICATED_ROUTE 2.2.2 MARK_DEBUG 2.2.3 DONT_TOUCH 2.2.4 LOCK_PINS 三、位置约束 四、布线约束 4.1 route 4.2 assign routing mode 五、参考 一、背景 在工程设计中为了保证上板后功能正常&…

【BI看板】Docker-compose安装Superset,安装最新版本2.1.0

软件及环境准备 docker&#xff0c; docker-compose docker-compose安装 字节码安装 #wget https://github.com/docker/compose/releases/download/v2.5.0/docker-compose-linux-x86_64 #mv docker-compose-linux-x86_64 docker-compose #chmod x /usr/local/bin/docker-com…

一、计算机网络体系结构

Content 1. 计算机网络的组成2. 计算机网络的功能3. 计算机网络的分类4. 计算机网络的性能指标5. 计算机网络分层结构OSI模型TCP/IP模型互联网五层模型共同点&#xff1a; 6. 计算机网络提供的服务按三种方式分类面向连接服务和无连接服务可靠服务和不可靠服务有连接服务和无连…

5G+AI数字化智能工厂建设解决方案PPT

导读&#xff1a;原文《5GAI数字化智能工厂建设解决方案》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。数字化智能工厂定义 智能基础架构协同框架 - 端、边、云、网…

Java课题笔记~ SpringMVC拦截器

SpringMVC 中的 Interceptor 拦截器&#xff0c;它的主要作用是拦截指定的用户请求&#xff0c;并进行相应的预处理与后处理。其拦截的时间点在“处理器映射器根据用户提交的请求映射出了所要执行的处理器类&#xff0c;并且也找到了要执行该处理器类的处理器适配器&#xff0c…

2023华为产品测评官-开发者之声 + 华为云ModelArts试用体验心得

2023华为产品测评官&#xff0d;开发者之声 华为云ModelArts试用体验心得 文章目录 2023华为产品测评官&#xff0d;开发者之声 华为云ModelArts试用体验心得一、活动介绍二、华为云ModelArts简介三、AI Gallery简介步骤1&#xff1a;订阅模型步骤2&#xff1a;使用订阅模型部…

Reids 的整合使用

大家好 , 我是苏麟 , 今天带来强大的Redis . REmote DIctionary Server(Redis) 是一个由 Salvatore Sanfilippo 写的 key-value 存储系统&#xff0c;是跨平台的非关系型数据库。 Redis 是一个开源的使用 ANSI C 语言编写、遵守 BSD 协议、支持网络、可基于内存、分布式、可选…

冯·诺依曼计算机

一、定义 冯诺依曼机&#xff08;von Neumann machine&#xff09;&#xff0c;又称冯诺依曼计算机&#xff0c;根据冯诺依曼提出的存储程序概念设计的计算机。主要特征是&#xff1a;指令与数据都以二进制形式储存在存储器里&#xff1b;指令根据其储存的顺序执行。 冯…

SpringBoot常用注解 - @Controller

Controller : Controller是加在类上面的注解&#xff0c;使得类里面的每个方法都返回一个视图页面 实际开发中&#xff0c;有时候只是让后端的结果返回到前端&#xff0c;而不作为新的视图页面&#xff0c;此时需要结合 ResponseBody&#xff0c;让这个方法返回给前端的不是一个…

三星霸主地位“无可撼动“,DRAM内存市场份额创近 9 年新低仍第一

三星电子在DRAM市场的竞争地位一直备受关注。据报告显示&#xff0c;除了市场份额下降外&#xff0c;三星电子在上半年的销售额也出现了下滑。这主要是由于全球消费电子产品需求下滑&#xff0c;导致三星电子的芯片需求减少。 存储芯片业务所在的设备解决方案部门的营收和利润也…

快速提高写作生产力——使用PicGo+Github搭建免费图床,并结合Typora

文章目录 简述PicGo下载PicGo获取Token配置PicGo结合Typora总结 简述PicGo PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具 PicGo 本体支持如下图床&#xff1a; 七牛图床 v1.0腾讯云 COS v4\v5 版本 v1.1 & v1.5.0又拍云 v1.2.0GitHub v1.5.0SM.MS V2 v2.3.0-b…