代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<!DOCTYPE html>
<html>
<fieldset><h2>用户注册</h2></fieldset>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<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" 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" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">手机号:</label>
<div class="layui-input-inline layui-input-wrap">
<!--正则表达式rp-->
<input type="text" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请输入手机号" lay-affix="clear" class="layui-input demo-phone">
</div>
<div class="layui-form-mid" style="padding: 0!important;">
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="vercode" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
</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="女">
</div>
</div>
<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="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">爱好1</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<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">
<div class="layui-inline">
<label class="layui-form-label">分组选择框</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号</option>
.
<option value="你最喜欢的老师">你最喜欢的老师</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">家庭住址</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="山西" >山西</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="1">太原</option>
<option value="2">运城</option>
<option value="3">长治</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="1">盐湖区</option>
<option value="2">临猗</option>
<option value="3">解州</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">爱好2</label>
<div class="layui-input-block">
<input type="checkbox" name="arr[0]" title="游泳">
<input type="checkbox" name="arr[1]" title="跑步" >
<input type="checkbox" name="arr[2]" title="唱歌">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">普通文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="layui/layui.js"></script>
<script>
layui.use(['form', 'laydate', 'util'], function(){
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var util = layui.util;
// 自定义验证规则
form.verify({
pass: function(value) {
if (!/(.+){6,12}$/.test(value)) {
return '密码必须 6 到 12 位';
}
}
});
// 提交事件
form.on('submit(demo1)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果,仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
// 日期
laydate.render({
elem: '#date'
});
// 普通事件
util.on('lay-on', {
// 获取验证码
"get-vercode": function(othis){
var isvalid = form.validate('.demo-phone'); // 主动触发验证,v2.7.0 新增
// 验证通过
if(isvalid){
layer.msg('手机号规则验证通过');
// 此处可继续书写「发送验证码」等后续逻辑
// …
}
}
});
});
</script>
</body>
</html>
</head>
<body>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。