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

例子代码：

<!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. kubernetes版本apiversion简单说明

    在使用yaml文件部署Deployment项目时,出现过 error: error validating "xx-Deployment.yaml": error validatin ...

  2. 【FFMPEG】Windows下使用Visual Studio 2010编译ffmpeg全过程

    原文  http://www.cnblogs.com/xylc/p/3683203.html 主题 FFmpegWindowsVisual Studio ffmpeg是一个开源的多媒体库,使用非常广泛 ...

  3. php display_errors

    // 检测开发环境 public function setReporting() { if (APP_DEBUG === true) { error_reporting(E_ALL); ini_set ...

  4. spring的控制器如何跳转到指定的视图

    1.控制器代码 2.跳转代码 return "greeting"; 引号内为跳转的页面,默认不需要加html

  5. gx_dlms 的杂乱记录

    DLMS_ERROR_CODE_FALSE W3Jehpnc543MuwUz6ZWDshy5kwbbE9Cw CGXDLMSClient::GetData(CGXByteBuffer& rep ...

  6. golang 二维切片

    初始化: res := make([][length]int, length), 例如: res := make([][2]int, 10) fmt.Println(res) 输出: [[0 0] [ ...

  7. HDFS 读/写数据流程

    1. HDFS 写数据流程 客户端通过 Distributed FileSystem 模块向 NameNode 请求上传文件, NameNode 检查目标文件是否已存在,父目录是否存在: NameNo ...

  8. System x 服务器制作ServerGuide U盘安装Windows Server 2008 操作系统 --不格式化盘

    1.全格式化 用ServerGuide10.5 刻录成U盘 下载附件中的Rufus 3.6工具,并制作引导U盘 以管理员权限打开Rufus 3.6, 选择镜像文件 2.不格式化,仅安装C盘下载老毛桃U ...

  9. oracle建表字段包含关键字注意事项

    SQL建表时最好不要把表定义成关键字字段 1 若不小心把表定义成关键字了,比如option, desc等等,oracle版本查询会有问题,短期内无法修改字段名称的,暂时用字段名+双引号解决: SELE ...

  10. 浅谈 JDBC 中 CreateStatement 和 PrepareStatement 的区别与优劣

    先说下这俩到底是干啥的吧.其实这俩干的活儿都一样,就是创建了一个对象然后去通过对象调用executeQuery方法来执行sql语句.说是CreateStatement和PrepareStatement ...