Layui表单必填项自动打红色*号

我不是女神ヾ 2023-10-05 13:20 36阅读 0赞

一般的打星号写法：

<span style="color:red">*</span>

通过CSS更加规范统一整齐

<style>
      .layui-input{height:30px;} /* layui-input 默认太高了，这里固定高度*/
      label.required:after {   /* 给红色的必填项打红色星号（文字后）如果打前面用before*/
            content: ' *';
            color: red;
        }
    </style>
    
      .layui-form-label.required:after {   /* 这种写法也可以*/
            content: ' *';
            color: red;
        }

Html

<div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label required">用户名</label>
          <div class="layui-input-inline">
            <input type="tel" name="username" lay-verify="required" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label required">登入次数</label>
          <div class="layui-input-inline">
            <input type="text" name="logins" lay-verify="required" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020110902454821.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3doNDQ1MzA2,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

相关 TextView 必填项pro版

优点 > 基本解决对齐方式,可以设置前缀隐藏和显示 / https://blog.csdn.net/u013982652/article/details

雨点打透心脏的1/2处/ 2023年10月13日 19:28/ 0 赞/ 50 阅读

相关 Layui表单必填项自动打红色*号

一般的打星号写法： <span style="color:red"></span> 通过CSS更加规范统一整齐 <style> .layui-

我不是女神ヾ/ 2023年10月05日 13:20/ 0 赞/ 37 阅读

相关 vue表单必填项前面添加红色*

vue [表单][Link 1]必填项前面添加红色\和提示信息 1.效果图 ![在这里插入图片描述][20200811153932900.png] 2.实现代码

野性酷女/ 2023年09月29日 14:29/ 0 赞/ 103 阅读

相关 vue + elementUI 的表单实现部分必填项校验

接手过一个vue + element 项目，要求对 from 表单进行部分校验；两个按钮点击分别校验表单里面的不同项。主要用到了 elementUI 的 form 表单提供

灰太狼/ 2023年01月02日 06:26/ 0 赞/ 162 阅读

相关表单必填脚本_使用PHP脚本创建简单搜索表单的说明

表单必填脚本创建数据库 ( Creating the Database ) Having a search feature on your site is ha

梦里梦外;/ 2022年12月07日 12:08/ 0 赞/ 177 阅读

相关 element-ui 设置表单必填项

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

╰半夏微凉°/ 2022年11月26日 08:43/ 0 赞/ 656 阅读

相关 elementui form必填项显示红色星号但不触发校验

封装的form组件父组件传rules,必填项显示红色星号但不触发校验 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

阳光穿透心脏的1/2处/ 2022年10月16日 06:06/ 0 赞/ 6 阅读

相关 layui——表单

<form class="layui-form" action=""> <div class="layui-form-item">

你的名字/ 2022年05月12日 14:04/ 0 赞/ 254 阅读

相关 js校验必须为数字，必填项控制

input只能输入数字js： $('input:not(:eq(1))').keyup(function() \{ if (this.val

浅浅的花香味﹌/ 2022年05月08日 10:30/ 0 赞/ 275 阅读

相关 lay-verify进行非必填项校验

它默认都验证了！需要调整源码！`form.js`,`layui.all.js` this.config = { veri

客官°小女子只卖身不卖艺/ 2021年11月09日 02:08/ 0 赞/ 506 阅读