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

例子代码：

<!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. 可执行jar包与依赖jar包

    1.在IDEA的pom文件中有如下配置的,打包出来的是可执行jar包,可执行jar包不能作为依赖. <build> <plugins> <plugin> <g ...

  2. HDU 1317：XYZZY

    Problem Description It has recently been discovered how to run open-source software on the Y-Crate g ...

  3. js统计页面中各个标签出现的次数，倒序排列

    // html <html> <div>hello</div> <div>world</div> <a href="&quo ...

  4. js函数（3）

    8.5 作为命名空间的函数 即定义一个函数用做临时的命名空间,在这个命名空间内定义的变量都不会污染到全局命名空间. 将一段代码封装在函数内部,然后调用这个函数.这样全局变量就变成了函数内部的局部变量: ...

  5. 什么是Java多线程？

    第五阶段 多线程 前言: 一个场景:周末,带着并不存在的女票去看电影,无论是现场买票也好,又或是手机买票也好,上一秒还有位置,迟钝了一下以后,就显示该座位已经无法选中,一不留神就没有座位了,影院的票是 ...

  6. [转帖]「知乎知识库」— 5G

    「知乎知识库」— 5G 甜草莓 https://zhuanlan.zhihu.com/p/55998832 ​ 通信 话题的优秀回答者 已关注 881 人赞同了该文章 谢 知识库 邀请~本文章是几个答 ...

  7. 【AtCoder】ARC068

    ARC 068 C - X: Yet Another Die Game 显然最多的就是一次6一次5 最后剩下的可能需要多用一次6或者6和5都用上 #include <bits/stdc++.h& ...

  8. Hello TypeScript

    ⒈TypeScript简介 1.JavaScript的超集 2.支持ECMAScript6标准,并支持输出ECMAScript3/5/6标准的纯JavaScript代码 3.支持ECMAScript未 ...

  9. （八）springMvc 的参数绑定

    参数绑定 将客户端传来的 key/value 数据,绑定到 Controller 参数的过程 : 这一过程发生在调用 处理器适配器 的时候,spring 会去调用 参数绑定 组件,我使用的版本(4.5 ...

  10. # win10下设置软件启动快捷方式

    win10下设置软件启动快捷方式 win10下设置软件启动快捷键,必须把快捷方式放在C:\ProgramData\Microsoft\Windows\Start Menu\Programs目录下,在这 ...