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

例子代码：

<!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+']')//获取需要校验的元素

,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","").css("outline","").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'的更多相关文章

  1. 使用 SVG 制作单选和多选框动画【附源码】

    通过 JavaScript 实现 SVG 路径动画,我们可以做很多花哨的东西.今天我们要为您介绍一些复选框和单选按钮效果.实现的主要思路是隐藏原生的输入框,使用伪元素创造更具吸引力的样式,输入框被选中 ...

  2. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  3. php一些单选、复选框的默认选择方法（示例）

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  4. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  5. Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  6. MFC_2.1使用单选和多选框

    使用单选和多选框 单选 1.拖控件 设置名字,CTRL+D设置顺序,属性设置第一个GROUP为TRUE: 2.设置第一个按钮绑定变量为 值 INT型 名称m_RadioIndxe; 3.设置单击响应内 ...

  7. layui获取checkbox复选框值

    获取layui表单复选框已选中的数据 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  8. Layui 监听 复选框 提交表单

    表单数据这一块 layui 做的是真的不好,无论是在渲染还是在交互方面,每次都要自己来重新实现代码 #贴上代码 <!DOCTYPE html> <head> <meta ...

  9. 依赖layui form模块 复选框tree插件（拓展可根据属性单选还是多选，数据反选）

    近些天接的项目用的是layui.以前没用过,踩了很多坑,坑就不多说了,直接说layui的tree.因为自带的tree不满足需求,所以在论坛.博客上找了很久终于找到了可以复选的的插件,原文地址:http ...

随机推荐

  1. 记录编译<Separable Subsurface Scattering demo>工程遇到的问题

    1. Separable Subsurface Scattering demo 可以从 https://github.com/iryoku/separable-sss 下载下来,但是默认的sln 是 ...

  2. mysql5.6.36 编译报错make[1]: *** [storage/perfschema/unittest/CMakeFiles/pfs_connect_attr-t.dir/all]..

    cmake -DCMAKE_INSTALL_PREFIX=/usr/local/mysql -DMYSQL_DATADIR=/data/mysqldb -DMYSQL_UNIX_ADDR=/tmp/m ...

  3. 洛谷 题解 UVA1626 【括号序列 Brackets sequence】

    看还没有人发记搜的题解,赶紧来水发一篇 我们定义dp[i][j]为区间i~j内最少添加几个括号才能把这个串变成正规括号序列. 考虑四种情况 i>j不存在这种子串,返回0 i==j子串长度为1无论 ...

  4. NameNode 和 SecondaryNameNode

    1. NN 和 2NN 工作机制 NameNode 会产生在磁盘中备份元数据的FsImage; 每当元数据有更新或者添加数据时,修改内存中的元数据并追加到Edits中; SecondaryNameNo ...

  5. [转帖]2019-03-26 发布 深入理解 MySQL ——锁、事务与并发控制

    深入理解 MySQL ——锁.事务与并发控制 https://segmentfault.com/a/1190000018658828 太长了 没看完.. 数据库 并发  mysql 639 次阅读   ...

  6. windows 修改Administrator管理员账户名

      用[Win+R]组合键命令打开[运行]界面,输入[gpedit.msc],按[回车键]或[鼠标左键]单击[确定]按钮:   在弹出的[本地组策略编辑器]对话框中,依次[鼠标左键]点击打开:[计算机 ...

  7. java中拦截器与过滤器之间的区别

    过滤器,是在java web中,你传入的request,response提前过滤掉一些信息,或者提前设置一些参数,然后再传入servlet或者struts的 action进行业务逻辑,比如过滤掉非法u ...

  8. java http接口请求响应 request response

    接口类: 1 package org.sunshine.dcda.epg.wechat.controller.niao; 2 3 import javax.servlet.http.HttpServl ...

  9. 搜索（BFS、DFS、回溯）

    这类题是最简单的了都是一个套路,不像动态规划一类题一个套路,没做过就是不会也极难想出来. 一.BFS 解决的问题:用来初始点解决到指定点的最短路径问题,因为图的每一层上的点到初始点的距离相同.(注意是 ...

  10. ThreadLocal，Lock的事儿

    ThreadLocal作用 防止线程间的干扰 public interface Sequence { int getNumber(); } public class ClientThread exte ...