layui.js怎么在文本框后面添加必填的*符号

layui.js怎么在文本框后面添加必填的*符号,第1张

你可以在前边加,后边的话好像没有现成的,

前边加的代码:

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

<label class="layui-form-label required">标题</label>

<div class="layui-input-block">

<input type="text" name="title" id="title" autocomplete="off"

lay-verType="tips" placeholder="请输入标题" lay-verify="required"  class="layui-input" />

</div>

</div>

在label的class中加入【required】标签 ,然后在他输入框中加入【lay-verify="required" 】即可达到必填功能和提示效果,结果如图:

layui是一款基于jQuery的前端UI框架,可以通过以下方式获取文本框的内容:

1.使用jQuery的val()方法获取文本框的值。例如,如果你的文本框ID为“test”,那么你可以使用以下代码获取其值:

```

var value = $('#test').val()

```

2.使用layui的form模块获取文本框的值。需要先引入layui库和form模块,然后通过form.val()方法获取。例如,如果你的文本框name属性为“test”,那么你可以使用以下代码获取其值:

```javascript

layui.use('form', function(){

var form = layui.form

// 获取文本框的值

var value = form.val("formName")["test"]

})

```

其中,formName是你表单的名称,test是你文本框的name属性。

这些方法都可以获取到文本框的内容,具体使用取决于你的项目需求和文本框的结构。

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

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

<label class="layui-form-label">输入框</label>

<div class="layui-input-block">

<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

</div>

</div>

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

<label class="layui-form-label">密码框</label>

<div class="layui-input-inline">

<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">

</div>

<div class="layui-form-mid layui-word-aux">辅助文字</div>

</div>

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

<label class="layui-form-label">选择框</label>

<div class="layui-input-block">

<select name="city" lay-verify="required">

<option value=""></option>

<option value="0">北京</option>

<option value="1">上海</option>

<option value="2">广州</option>

<option value="3">深圳</option>

<option value="4">杭州</option>

</select>

</div>

</div>

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

<label class="layui-form-label">复选框</label>

<div class="layui-input-block">

<input type="checkbox" name="like[write]" title="写作">

<input type="checkbox" name="like[read]" title="阅读" checked>

<input type="checkbox" name="like[dai]" title="发呆">

</div>

</div>

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

<label class="layui-form-label">开关</label>

<div class="layui-input-block">

<input type="checkbox" name="switch" lay-skin="switch">

</div>

</div>

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

<label class="layui-form-label">单选框</label>

<div class="layui-input-block">

<input type="radio" name="sex" value="男" title="男">

<input type="radio" name="sex" value="女" title="女" checked>

</div>

</div>

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

<label class="layui-form-label">文本域</label>

<div class="layui-input-block">

<textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>

</div>

</div>

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

<div class="layui-input-block">

<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>

<button type="reset" class="layui-btn layui-btn-primary">重置</button>

</div>

</div>

</form>

<script>

//Demo

layui.use('form', function(){

var form = layui.form

//监听提交

form.on('submit(formDemo)', function(data){

layer.msg(JSON.stringify(data.field))

return false

})

})

</script>

<select name="quiz">

<option value="">请选择</option>

<optgroup label="城市记忆">

<option value="你工作的第一个城市">你工作的第一个城市?</option>

</optgroup>

<optgroup label="学生时代">

<option value="你的工号">你的工号?</option>

<option value="你最喜欢的老师">你最喜欢的老师?</option>

</optgroup>

</select>

<select name="city" lay-verify="" lay-search>

<option value="010">layer</option>

<option value="021">form</option>

<option value="0571" selected>layim</option>

……

</select>

默认风格:

<input type="checkbox" name="" title="写作" checked>

<input type="checkbox" name="" title="发呆">

<input type="checkbox" name="" title="禁用" disabled>

原始风格:

<input type="checkbox" name="" title="写作" lay-skin="primary" checked>

<input type="checkbox" name="" title="发呆" lay-skin="primary">

<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

<input type="checkbox" name="xxx" lay-skin="switch">

<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>

<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">

<input type="checkbox" name="aaa" lay-skin="switch" disabled>

<input type="radio" name="sex" value="nan" title="男">

<input type="radio" name="sex" value="nv" title="女" checked>

<input type="radio" name="sex" value="" title="中性" disabled>

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

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

<div class="layui-inline">

<label class="layui-form-label">范围</label>

<div class="layui-input-inline" style="width: 100px">

<input type="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">

</div>

<div class="layui-form-mid">-</div>

<div class="layui-input-inline" style="width: 100px">

<input type="text" name="price_max" placeholder="¥" autocomplete="off" class="layui-input">

</div>

</div>

<div class="layui-inline">

<label class="layui-form-label">密码</label>

<div class="layui-input-inline" style="width: 100px">

<input type="password" name="" autocomplete="off" class="layui-input">

</div>

</div>

</div>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11781715.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存