layui 单选框、多选框radio 元素判断是必填项 lay-verify=‘required‘

layui 单选框、多选框radio 元素判断是必填项 lay-verify=‘required‘简单验证复选框,单选框必填例子代码:<!DOCTYPEhtml><html><head><metacharset=”utf-8″><title>layui</title><metaname=”renderer”content=”webkit”><metaht…

大家好,又见面了,我是你们的朋友全栈君。

简单验证复选框,单选框必填

layui 单选框、多选框radio 元素判断是必填项 lay-verify=‘required‘

例子代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
      

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
  <legend>初始赋值演示</legend>
</fieldset>
 
<form class="layui-form" action="" lay-filter="example">
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like" lay-skin="primary" lay-verify="otherReq" title="写作">
      <input type="checkbox" name="like" lay-skin="primary" lay-verify="otherReq" title="阅读">
      <input type="checkbox" name="like"  lay-verify="otherReq" title="游戏">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" lay-verify="otherReq" title="男" >
      <input type="radio" name="sex" value="女" lay-verify="otherReq" title="女">
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>

<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
  var form = layui.form
  ,layer = layui.layer
  ,layedit = layui.layedit
  ,laydate = layui.laydate;
  

  //自定义验证规则
  form.verify({
    otherReq: function(value,item){
      var $ = layui.$;
      var verifyName=$(item).attr('name')
      , verifyType=$(item).attr('type')
      ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素,如果存在的话
//,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
,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 '必填项不能为空';
}
    }
  });
 
  //监听提交
  form.on('submit(demo1)', function(data){
    layer.alert(JSON.stringify(data.field), {
      title: '最终的提交信息'
    })
    return false;
  });
 
});
</script>

</body>
</html>

注意:

所有单选和多选这里都是要设置成一样子:lay-verify=”otherReq”

layui 单选框、多选框radio 元素判断是必填项 lay-verify=‘required‘

转载:https://fly.layui.com/jie/49182/

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139121.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • eclipse中配置jdk

    eclipse中配置jdkwindow->preference->java->installjres->add->standardvm->设置好相应的jrehomeeclipse的实验版本:Version:4.3.0.v20130605-20001、点击eclipse菜单栏的window下拉菜单选中preference2、点击…

  • mysql主从复制原理面试_数据库主从复制 读写分离

    mysql主从复制原理面试_数据库主从复制 读写分离为什么要做主从复制在业务复杂的系统中,有这么一个情景,有一句sql语句需要锁表,导致暂时不能使用读的服务,那么就很影响运行中的业务,使用主从复制,让主库负责写,从库负责读,这样,即使主库出现了锁表的情景,通过读从库也可以保证业务的正常运行。做数据的热备,主库宕机后能够及时替换主库,保证业务可用性。架构的扩展。业务量越来越大,I/O访问频率过高,单机无法满足,此时做多库的存储,降低磁盘I/O……

  • struts2拦截器详解_拦截和修改tcp数据

    struts2拦截器详解_拦截和修改tcp数据Struts2中的拦截器和servelt中的过滤器是非常的相似的。如果学过过滤器的话,肯定能够感觉的到,尽管有些微的不同。可是struts2的拦截器到底如何使用呢,为什么会有这些配置呢?接下来一一来看。 过滤器和拦截器是非常相似的,过滤器publicinterfaceFilter接口里面有三个方法: init(FilterConfigfilterConfig),des

  • idea如何创建一个javaweb项目_Java创建一个新项目

    idea如何创建一个javaweb项目_Java创建一个新项目Idea创建JavaWeb项目步骤:1、打开IntellijIdeaIDE,然后点击CreateNewProject2、左侧选择JavaEnterprise,右侧选择WebApplication3、这里输入项目名字为firstdemo,然后点击Finish完成。生成如下的项目结构:项目配置:1、在web/WEB-INF下创建两个文件夹classes和lib,classes用来存放编译后输出的classes文件,lib用于存放第三方jar包。..

  • 概率矩阵分解模型 PMF[通俗易懂]

    概率矩阵分解模型 PMF[通俗易懂]本文是论文《一种结合推荐对象间关联关系的社会化推荐算法》的笔记(上)。因为对其中的概率矩阵分解(ProbabilisticMatrixFactorization,PMF)不够了解,因而我先去脑补了PMF在推荐系统中的应用,然后再对论文进行总结。主要内容包括svd的两种形式和PMF的介绍。

  • jzoj 1146. 危险系数(acrobat)

    jzoj 1146. 危险系数(acrobat)1146.危险系数(acrobat) (FileIO): input:acrobat.in output:acrobat.out时间限制: 1000ms  空间限制: 262144KB  具体限制  GotoProblemSet题目描述   N(1输入第一行:输入一个整数N;第2到

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号