layui/docs/form/examples/form.demo.md

验证必填项

验证手机号

获取验证码

验证码

验证邮箱

验证日期

自定义验证

6 到 12 位字符

范围

-

单行选择框

写作 阅读 游戏 音乐 旅行

分组选择框

请选择问题 你工作的第一个城市 你的工号 你最喜欢的老师

搜索选择框

直接选择或搜索选择 layer form layim element laytpl upload laydate laypage flow util code tree layedit nav tab table select checkbox switch radio

联动选择框

请选择省 浙江省 江西省 福建省

请选择市 杭州 宁波 温州 台州 绍兴

请选择县/区 西湖区 余杭区 临安市

复选框

标签框

开关

单选框

普通文本域

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

立即提交 重置

<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: [ /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格' ] }); // 指定开关事件 form.on('switch(switchTest)', function(data){ layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), { offset: '6px' }); layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis) }); // 提交事件 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>