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

例子代码：

<!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. 【VS开发】VC下加载JPG/GIF/PNG图片的两种方法

    1.用API OleLoadPicture来加载JPG.GIF格式的图片(注:不支持PNG格式,另外GIF只能加载第一帧,且不支持透明) OleLoadPicture 函数实际上创建了一个IPictu ...

  2. 最新 鹏博士java校招面经 （含整理过的面试题大全）

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

  3. StormUI各参数详解

    参考:http://www.malinga.me/reading-and-understanding-the-storm-ui-storm-ui-explained/  

  4. Reactor系列（二）Flux Mono创建

    Flux Mono创建 视频讲解:https://www.bilibili.com/video/av78844777/ FluxMonoTestCase.java package com.exampl ...

  5. 输出重定向之python2和python3的区别

    python语句支持输出重定向到文件里,与shell类似使用“>>”来重定向输出. python2: logfile = open('mylog.txt', 'a') print > ...

  6. 动态代理 aop切面实现事务管理

    1.定义接口和实现 public interface UserService { public String getName(int id); public Integer getAge(int id ...

  7. （三）mybatis 的使用（入门）

    目录 mybatis 的使用 -- 准备 mybatis 的使用 -- 搭建好工程结构 mybatis 的使用 -- 创建 sqlMapCnfig.xml 全局配置文件 mybatis 的使用 -- ...

  8. 【Python基础】05_Python中的while循环

    1.程序的三大流程介绍 顺序 —— 从上到下,顺序执行 分支 —— 根据条件判断,决定代码的分支 循环 —— 让特定代码执行 2.while 基本语法 while 条件(判断 计数器 是否达到 目标次 ...

  9. S02_CH05_UBOOT实验Enter a post title

    S02_CH05_UBOOT实验 5.1什么是固化 我们前几章的程序都是通过JTAG先下载bit流文件,再下载elf文件,之后点击Run As来运行的程序.JTAG的方法是通过TCL脚本来初始化PS, ...

  10. S02_CH03_EMIO实验Enter a post title

    S02_CH03_EMIO实验 3.1 EMIO 和MIO的对比介绍 上次讲到MIO的使用,初步熟悉了EDK的使用,这次就来说说EMIO的使用.如你所见zynq的GPIO,分为两种,MIO(multi ...