layui.js实现的表单验证功能示例

本文实例讲述了layui.js实现的表单验证功能。分享给大家供大家参考，具体如下：

该示例可针对文本框，手机，邮箱，文本区域等格式进行验证

首先引入如下文件：

脚本src=' http : layui/layui。js '/script script src=' http : layui/lay/dest/layui。全部。js '/脚本链接rel='样式表href='layui/css/layui.css' rel='外部nofollow' rel='外部' nofollow' HTML代码：

form class=' layui-form ' action=' div class=' layui-form-item ' label class=' layui-form-label '反馈主题/label div class=' layui-input-block ' input name=' title ' class=' layui-input ' type=' text ' placeholder='请输入标题自动完成=' off ' lay-verify=' title '/div/div class=' layui-form-item ' label class=' layui-form-label '姓名/label div class=' layui-input-block '输入名称=' fname ' class=' layui-input type=' text '占位符='请输入姓名自动完成=' off ' lay-verify=' fname '/div/div class=' layui-form-item ' label class=' layui-form-label '手机/label div class=' layui-input-block ' input name=' phone ' class=' layui-input ' type=' tel ' autocomplete=' off ' placeholder='请输入手机lay-verify=' phone '/div/div class=' layui-form-item ' label class=' layui-form-label '邮箱/label div class=' layui-input-block '输入名称=' email '类=' layui-input '类型=' text '自动完成=' off '占位符='请输入邮箱lay-verify=' email '/div/div class=' layui-form-item ' label class=' layui-form-label '单选框/label div class=' layui-input-block ' input name=' sex ' title='男type='radio '选中值='男输入名称='sex' title='女type='radio' value='女输入名称='sex' title='保密type='radio' value='密/div /div！ -div class=' layui-form-item layui-form-text ' label class=' layui-form-label '普通文本域/label div class=' layui-input-block '文本区域class=' layui-文本区域'占位符='请输入内容'请输入内容/text area/div/div-div class=' layui-form-item layui-form-text ' label class=' layui-form-label '内容/label div class=' layui-input-block ' text area class=' layui-text area layui-hide ' name=' contact ' id=' LAY _ demo _ editor ' LAY-verify=' contact '/text area/div/class=' layui-form-item ' div class=' layui-input-block '按钮class=' layui-BTN ' LAY-filter=' demo 2 ' LAY-submit='跳转式提交/button button class=' layui-BTN ' lay-filter=' demo 1 ' lay-submit=' '立即提交/button button class=' layui-BTN layui-BTN-primary ' type=' reset '重置/button /div /div/formjs验证代码

scriptlayui.use(['form '，' lay dit '，' laydate']，function(){ var form=layui.form()，layer=layui.layer，lay dit=layui。铺设dit，铺设日期=铺设时间。奠定日期；//自定义验证规则形式。验证({ title :函数(值){ if(值)。长度5){ return '标题至少得5个字符啊；} }，fname:函数（值){ if(value.length 4){ return '请输入至少四位的用户名；} }，联系人：函数（值){ if(value.length 4){ return '内容请输入至少四个字符；} },电话：[/^1[3|4|5|7|8]\d{9}$/]手机必须11位，只能是数字!'],电子邮件： [/^[a-z0-9._ %-][电子邮件保护]([a-z0-9-]\ .)[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/，”邮箱格式不对'] });//创建一个编辑器LAY dit。构建(' LAY _ demo _ editor ')；//监听提交form.on('submit(demo1)，' function(data){ layer。警报(JSON。stringify(数据。字段)，{ title: '最终的提交信息})返回false })；});/script完整示例代码如下：

！DOCTYPE html html lang=' en ' hearta charset=' UTF-8 '标题www。jb51。net layui表单验证/title脚本src=' http : layui/layui。js '/script script src=' http : layui/layui。全部。js '/脚本链接rel='样式表href='layui/css/layui.css' rel='外部nofollow' rel='外部no follow/headdyform class=' layui-form ' action=' div class=' layui-form-item ' label class=' layui-form-label '反馈主题/label div class=' layui-input-block ' input name=' title ' class=' layui-input ' type=' text ' placeholder='请输入标题自动完成=' off ' lay-verify=' title '/div/div class=' layui-form-item ' label class=' layui-form-label '姓名/label div class=' “layui-input-block”输入名称=“fname”类=“layui-input”类型=“text”占位符=”请输入姓名自动完成=' off ' lay-verify=' fname '/div/div class=' layui-form-item ' label class=' layui-form-label '手机/label div class=' layui-input-block ' input name=' phone ' class=' layui-input ' type=' tel ' autocomplete=' off ' placeholder='请输入手机lay-verify=' phone '/div/div class=' layui-form-item '标签类=' layui-form-label '邮箱/label div class=' layui-input-block ' input name=' email ' class=' layui-input ' type=' text ' autocomplete=' off ' placeholder='请输入邮箱lay-verify=' email '/div/div class=' layui-form-item ' label class=' layui-form-label '单选框/标签div class='layui-input-block '输入名称='sex' title='男type='radio '选中值='男输入名称='sex' title='女type='radio' value='女输入名称='sex' title='保密type='radio' value='密/div /div！ -div class=' layui-form-item layui-form-text ' label class=' layui-form-label '普通文本域/label div class=' layui-input-block '文本区域class=' layui-文本区域'占位符='请输入内容'请输入内容/text area/div/div-div class=' layui-form-item layui-form-text ' label class=' layui-form-label '内容/label div class=' layui-input-block ' text area class=' layui-text area layui-hide ' name=' contact ' id=' LAY _ demo _ editor ' LAY-verify=' contact '/text area/div/class=' layui-form-item ' div class=' layui-input-block '按钮class=' layui-BTN ' LAY-filter=' demo 2 ' LAY-submit='跳转式提交/button button class=' layui-BTN ' lay-filter=' demo 1 ' lay-submit=' '立即提交/button button class=' layui-BTN layui-BTN-primary ' type=' reset '重置/button/div/div/formscriptlayui。 使用([' form '，' lay dit '，' laydate']，function(){ var form=layui.form()，layer=layui.layer，lay dit=layui。铺设dit，铺设日期=铺设时间。奠定日期；//自定义验证规则形式。验证({ title :函数(值){ if(值)。长度5){ return '标题至少得5个字符啊；} }，fname:函数（值){ if(value.length 4){ return '请输入至少四位的用户名；} }，联系人：函数（值){ if(value.length 4){ return '内容请输入至少四个字符；} },电话：[/^1[3|4|5|7|8]\d{9}$/]手机必须11位，只能是数字！],电子邮件： [/^[a-z0-9._ %-][电子邮件保护]([a-z0-9-]\ .)[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/，”邮箱格式不对'] });//创建一个编辑器LAY dit。构建(' LAY _ demo _ editor ')；//监听提交form.on('submit(demo1)，' function(data){ layer。警报(JSON。stringify(数据。字段)，{ title: '最终的提交信息})返回false })；});/脚本/正文/html运行效果如下：

附：layui插件源码可点击此处本站下载。

另外，其他验证功能还可参考本站//www .JB 51。net/article/96722。html文件的后缀

希望本文所述对大家基于layui框架的程序设计有所帮助。