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)


相关推荐

  • 分子动力学模拟软件_分子模拟软件Discovery Studio教程(十九):虚拟氨基酸突变提高结合亲和力…

    分子动力学模拟软件_分子模拟软件Discovery Studio教程(十九):虚拟氨基酸突变提高结合亲和力…DiscoveryStudio™(简称DS)是专业的生命科学分子模拟软件,DS目前的主要功能包括:蛋白质的表征(包括蛋白-蛋白相互作用)、同源建模、分子力学计算和分子动力学模拟、基于结构药物设计工具(包括配体-蛋白质相互作用、全新药物设计和分子对接)、基于小分子的药物设计工具(包括定量构效关系、药效团、数据库筛选、ADMET)和组合库的设计与分析等。蛋白的氨基酸定点突变可用于酶与抗体的设计,这…

  • java excel转json

    java excel转jsonpackagecom.xmg.excel;importjava.io.BufferedWriter;importjava.io.File;importjava.io.FileOutputStream;importjava.io.IOException;importjava.io.OutputStreamWriter;importjava.net.URL;import…

  • sublime插件开发教程(附源码)

    sublime插件开发教程(附源码)1.背景       虽然可能大神门在编辑器方面都比较偏向于vim之类的自由度更高的工具,但是从我个人来讲sublime这样的插件安装更方便的工具还是比较得心应手的。之前用sublime写英语作文,但是没有一个比较好用的timer,Package_Control里面的track_timer不能实时显示时间,所以博主就自己动手,写了这个插件,可以实时timer,记录时间。效果如下图,2.使

  • 股票历史数据下载接口汇总(动态更新)

    歪枣网上提供股票历史数据下载接口汇总,实时动态更新接口名称 Api接口 接口描述 A股列表 getStockHSABaseInfo 沪深A股基本信息 每日行情 getStockHSADailyMarket 沪深A股每日行情数据 实时数据 getStockHSAMinuteKLine 沪深A股实时数据,提供30个交易日内的每日实时交易数据,数据以分钟为粒度。 时线数据 getStockHSAHourKLine 沪深A股分时数据,提供30个交易日内的5分钟、15分钟、30分钟、60分钟数据。 日线数

  • Linux 安装 Nginx 并搭建 Tomcat 集群

    Linux 安装 Nginx 并搭建 Tomcat 集群

  • 读取QQ ClientKey C++版本[通俗易懂]

    读取QQ ClientKey C++版本[通俗易懂]不需要注入,读取QQClientKeyC++版本#include”stdafx.h”#include<string>#include<windows.h>#include<iostream>#include<WinInet.h>#pragmacomment(lib,”wininet.lib”)usingnamespaces…

    2022年10月22日

发表回复

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

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