layui表单+显示和隐藏密码

 <div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">密 码</label><div class="layui-input-inline" ><input type="password" name="password" id="password" required lay-verify="required||password" placeholder="请输入密码" autocomplete="off" class="layui-input" th:value="${session.userinfo.password}" ></div><!--<div class="layui-form-mid">-</div>--><div class="layui-input-inline" style="width: 20px;margin-top:10px "><a href="javascript:void(0);" id="show" style="text-decoration:none;"><i class="iconfont iconyanjing_bi" id="iconyanjing_bi" ></i></a></div></div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script th:src="@{/bootstrap3/js/jquery-3.5.1.min.js}"></script>
<script type="text/javascript">$("#show").on("click", ".iconyanjing_bi", function () {$(this).removeClass("iconyanjing_bi").addClass("iconyanjing");$("#password").attr("type", "text");});$("#show").on("click", ".iconyanjing", function () {$(this).removeClass("iconyanjing").addClass("iconyanjing_bi");$("#password").attr("type", "password");});</script>

关键在于layui组装行内表单排版

layui表单+显示和隐藏密码相关推荐

Layui表单账号注册校验密码是否一致
HTML: <div class="layui-form-item"><div class="layui-inline"><lab ...
layui表单验证内置自定义规则 - 使用说明
关于 layui表单的验证规则.调用.自定义规则的使用经验总结: 除了 layui 本身配套的一个验证体系,还支持开发者自定义验证规则(如上表中的[自定义密码验证(代码参考下文)]),并直接嵌入到页面 ...
layui表单提交使用form.on(‘submit(sub)‘,function (){}) 使用ajax请求时回调不执行的原因及解决方法
layui表单提交使用form.on('submit(sub)',function (){}) 使用ajax请求时回调不执行的原因及解决方法参考文章: (1)layui表单提交使用form.on(' ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
Layui表单复选框验证
Layui表单复选框验证近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提 ...
vue表单验证(用户名、密码、身份证号、中文姓名、手机号、邮箱)
vue表单验证(用户名.密码.身份证号.中文姓名.手机号.邮箱) new Vue({el: '#register',data: function() {// 验证邮箱let checkEmail = ...
Swing 给密码框JPasswordField设置显示和隐藏密码功能
先上个效果图接下来代码 JPasswordField pwd = new JPasswordField(); pwd.setEchoChar('*');//添加显示密码图标按钮 JButton vi ...
Layui表单验证失效解决办法
出现layui表单提交时没有进行验证的情况解决办法 <div class="layui-input-inline" style="width: 150px;&quo ...
layui表单动态CURD功能
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.手残党的搬砖添瓦二.使用步骤 1.引入CSS,JS样式 2.CURD实操总结前言时间:2022-11-15 ...

layui表单+显示和隐藏密码

关键在于layui组装行内表单排版

layui表单+显示和隐藏密码相关推荐

最新文章

热门文章