layui(五)——form组件常见用法总结
form组件是layui中常用的表单组件，可以用于快速构建各种表单。本文介绍layui中form组件的常见用法，包括表单元素、表单验证和示例说明。
表单元素
form组件中常用的表单元素包括input、select、checkbox、radio、switch等。具体法如下：
input
input是form组件中最常用的表单元素之一，可以用于输入文本、数字、日期等。常用的input类型包括text、password、number、date等。具体用法如下：
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
select
select是form组件中用于选择的表单元素，可以用于选择单个或多个选项。常用的select类型包括普通拉框、多选下拉框、级联下拉框等。具体用法如下：
<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="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
</select>
</div>
</div>
checkbox
checkbox是form组件中用于多选的表单元素，可以用于选择多个选项。具体用法如下：
<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="阅读">
<input type="checkbox" name="like[game]" title="游戏">
</div>
</div>
radio
radio是form组件中用于单选的表单元素，可以用于选择单个选项。具体用法如下：
<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="女">
</div>
</div>
switch
switch是form组件中用于开关的表单元素，可以用于开启或关闭某个功能。具体用法如下：
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
表单验证
form组件中的表单验证可以帮助开发者快速实现表单验证功能，包括必填项、长度限制、格式验证等。具体用法如下：
<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="username" 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-block">
<input type="password" name="password" 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-block">
<input type="password" name="repassword" required lay-verify="required|repassword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
</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>
layui.use('form', function(){
var form = layui.form;
//自定义验证规则
form.verify({
repassword: function(value){
if(value !== $('input[name="password"]').val()){
return '两次密码输入不一致';
}
}
});
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
示例说明
下面将给出两个示例说明，分别是使用form组件实现一个登录表单和一个注册表单。
示例1：登录表单
使用form组件实现登录表单的具体骤如下：
<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="username" 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-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
</div>
</div>
</form>
<script>
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
示例2：注册表单
使用form组件实现注册表单的具体步骤如下：
<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="username" 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-block">
<input type="password" name="password" 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-block">
<input type="password" name="repassword" required lay-verify="required|repassword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
</div>
</div>
</form>
<script>
layui.use('form', function(){
var form = layui.form;
//自定义验证规则
form.verify({
repassword: function(value){
if(value !== $('input[name="password"]').val()){
return '两次密码输入不一致';
}
}
});
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
注意事项
在使用form组件时，需要注意以下事项：
- 在使用表单元素时，需要注意表单元素的类型和属性设置。
- 在使用表单验证时，需要注意验证规则的设置和自定义验证函数的编写。
- 在使用form组件时，需要引入layui的form模块，并在页面加载完成后进行初始化。
总结
本文介绍了layui中form组件的常见用法，包括表单元素、表单验证和示例说明。需要注意的是，在使用form组件时，需要注意表单元素的类型和属性设置，验证规则的设置和自定义验证函数的编写，以及引入layui的form模块并进行初始化。
示例1：登录表单
使用form组件实现登录表单的具体骤如下：
<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="username" 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-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
</div>
</div>
</form>
<script>
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
示例2：注册表单
使用form组件实现注册表单的具体步骤如下：
<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="username" 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-block">
<input type="password" name="password" 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-block">
<input type="password" name="repassword" required lay-verify="required|repassword" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">注册</button>
</div>
</div>
</form>
<script>
layui.use('form', function(){
var form = layui.form;
//自定义验证规则
form.verify({
repassword: function(value){
if(value !== $('input[name="password"]').val()){
return '两次密码输入不一致';
}
}
});
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
</script>
注意事项
在使用form组件时，需要注意以下事项：
- 在使用表单元素时，需要注意表单元素的类型和属性设置。
- 在使用表单验证时，需要注意验证规则的设置和自定义验证函数的编写。
- 在使用form组件时，需要引入layui的form模块，并在页面加载完成后进行初始化。
总结
本文介绍了layui中form组件的常见用法，包括表单元素、表单验证和示例说明。需要注意的是，在使用form组件时，需要注意表单元素的类型和属性设置，验证规则的设置和自定义验证函数的编写，以及引入layui的form模块并进行初始化。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui(五)——form组件常见用法总结 - Python技术站
微信扫一扫 
支付宝扫一扫 