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

例子代码：

<!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. 在VMware上部署MOS（MirantisOpenStack-6.0）搭建全过程

    安装清单 MOS9.0系统镜像 1 MirantisOpenStack-6.0.iso ****首先创建3个仅主机模式网卡, 禁用DHCP,分别配置ip为 /10.20.0.0 /172.16.0.0 ...

  2. 最新 科大讯飞java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.科大讯飞等10家互联网公司的校招Offer,因为某些自身原因最终选择了科大讯飞.6.7月主要是做系统复习.项目复盘.Leet ...

  3. Spring 视图层如何显示验证消息提示

    1.示例 <p th:if="${#fields.hasErrors('name')}" th:errors="*{name}" ></p&g ...

  4. mongodb的安装部署-备份

    1.安装部署 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.4.10.tgz tar -zxf mongodb-linux- ...

  5. 浅谈>/dev/null 2>&1

    在crond计划任务.nohup中我们经常可以看到>/dev/null 2>&1,但是很多人并不理解其含义,想要真正的理解它,首先我们需要知道文件描述符的三种类型. 类型 文件描述 ...

  6. Flask Bug记录之JinJa2.exceptions.UndefinedError: 'sqlite3.Row object' has no attribute 'get'

    源码 py文件定义db的工厂函数如下 def get_db(): if "db" not in g: g.db = sqlite3.connect( current_app.con ...

  7. SpringCloud 教程 | 终章

    错过了这一篇,你可能再也学不会 Spring Cloud 了!Spring Boot做为下一代 web 框架,Spring Cloud 作为最新最火的微服务的翘楚,你还有什么理由拒绝.赶快上船吧,老船 ...

  8. 小白学PYTHON时最容易犯的6个错误

    最近又在跟之前的同学一起学习python,一起进步,发现很多测试同学在初学python的时候很容易犯一些错误,特意总结了一下.其实这些错误不仅是在学python时会碰到,在学习其他语言的时候也同样会碰 ...

  9. xshell和xftp过期解决办法

    去官网 xshell:https://www.netsarang.com/download/down_form.html?code=522 xftp:https://www.netsarang.com ...

  10. 搭建Leanote网络云笔记

    下载启动 MongoDB Leanote 依赖 MongoDB 作为数据存储,下面开始安装 MongoDB: 下载 MongoDB 进入 /home 目录,并下载 MongoDB: cd /home ...