• layui 单选框、多选框radio 元素判断是必填项 lay-verify='required'


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

    例子代码:

    <!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","1").css("outline","0").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"

  • 相关阅读:
    JavaScript面试题
    HTML&&css面试题
    nodejs面试题
    linux上安装apache
    linux上安装mysql
    linux基础命令学习(三)Vim使用
    linux基础命令学习(一)
    spring学习(六)注解方式实现AOP
    spring学习(五)详细介绍AOP
    spring学习(一)spring简介
  • 原文地址:https://www.cnblogs.com/bluealine/p/11596505.html
Copyright © 2020-2023  润新知