layui.js實現(xiàn)的表單驗證功能示例
更新時間：2017年11月15日 11:21:22 作者：我是高手高手高高手
這篇文章主要介紹了layui.js實現(xiàn)的表單驗證功能,結(jié)合實例形式分析了基于layui.js的事件監(jiān)聽、驗證、判定等相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了layui.js實現(xiàn)的表單驗證功能。分享給大家供大家參考，具體如下：
該示例可針對文本框，手機(jī)，郵箱，textarea等格式進(jìn)行驗證
首先引入如下文件：
<script src="layui/layui.js"></script> <script src="layui/lay/dest/layui.all.js"></script> <link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external 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="請輸入標(biāo)題" autocomplete="off" lay-verify="title"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-block"> <input name="fname" class="layui-input" type="text" placeholder="請輸入姓名" autocomplete="off" lay-verify="fname"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">手機(jī)</label> <div class="layui-input-block"> <input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="請輸入手機(jī)" lay-verify="phone"> </div> </div> <div class="layui-form-item"> <label class="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> <div class="layui-form-item"> <label class="layui-form-label">單選框</label> <div class="layui-input-block"> <input name="sex" title="男" type="radio" checked="" value="男"> <input name="sex" title="女" type="radio" value="女"> <input name="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"> <textarea class="layui-textarea" placeholder="請輸入內(nèi)容">請輸入內(nèi)容</textarea> </div> </div>--> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">內(nèi)容</label> <div class="layui-input-block"> <textarea class="layui-textarea layui-hide" name="contact" id="LAY_demo_editor" lay-verify="contact"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-filter="demo2" lay-submit="">跳轉(zhuǎn)式提交</button> <button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button> <button class="layui-btn layui-btn-primary" type="reset">重置</button> </div> </div> </form>
js驗證代碼
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form()
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//自定義驗證規(guī)則
form.verify({
title: function(value){
if(value.length < 5){
return '標(biāo)題至少得5個字符啊';
}
}, fname: function(value){
if(value.length < 4){
return '請輸入至少4位的用戶名';
}
}, contact: function(value){
if(value.length < 4){
return '內(nèi)容請輸入至少4個字符';
}
}
,phone: [/^1[3|4|5|7|8]\d{9}$/, '手機(jī)必須11位，只能是數(shù)字！']
,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '郵箱格式不對']
});
//創(chuàng)建一個編輯器
layedit.build('LAY_demo_editor');
//監(jiān)聽提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最終的提交信息'
})
return false;
});
});
</script>
完整示例代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn layui 表單驗證</title>
<script src="layui/layui.js"></script>
<script src="layui/layui.all.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" >
</head>
<body>
<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="請輸入標(biāo)題" autocomplete="off" lay-verify="title">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">姓名</label>
<div class="layui-input-block">
<input name="fname" class="layui-input" type="text" placeholder="請輸入姓名" autocomplete="off" lay-verify="fname">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">手機(jī)</label>
<div class="layui-input-block">
<input name="phone" class="layui-input" type="tel" autocomplete="off" placeholder="請輸入手機(jī)" lay-verify="phone">
</div>
</div>
<div class="layui-form-item">
<label class="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>
<div class="layui-form-item">
<label class="layui-form-label">單選框</label>
<div class="layui-input-block">
<input name="sex" title="男" type="radio" checked="" value="男">
<input name="sex" title="女" type="radio" value="女">
<input name="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">
<textarea class="layui-textarea" placeholder="請輸入內(nèi)容">請輸入內(nèi)容</textarea>
</div>
</div>-->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">內(nèi)容</label>
<div class="layui-input-block">
<textarea class="layui-textarea layui-hide" name="contact" id="LAY_demo_editor" lay-verify="contact"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-filter="demo2" lay-submit="">跳轉(zhuǎn)式提交</button>
<button class="layui-btn" lay-filter="demo1" lay-submit="">立即提交</button>
<button class="layui-btn layui-btn-primary" type="reset">重置</button>
</div>
</div>
</form>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form()
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//自定義驗證規(guī)則
form.verify({
title: function(value){
if(value.length < 5){
return '標(biāo)題至少得5個字符啊';
}
}, fname: function(value){
if(value.length < 4){
return '請輸入至少4位的用戶名';
}
}, contact: function(value){
if(value.length < 4){
return '內(nèi)容請輸入至少4個字符';
}
}
,phone: [/^1[3|4|5|7|8]\d{9}$/, '手機(jī)必須11位，只能是數(shù)字！']
,email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '郵箱格式不對']
});
//創(chuàng)建一個編輯器
layedit.build('LAY_demo_editor');
//監(jiān)聽提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最終的提交信息'
})
return false;
});
});
</script>
</body>
</html>
運行效果如下：
附：layui插件源碼可點擊此處本站下載。
另外，其他驗證功能還可參考本站http://www.dbjr.com.cn/article/96722.htm
希望本文所述對大家基于layui框架的程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了原生JS中應(yīng)該禁止出現(xiàn)的寫法，以提高代碼效率和安全性，對效率和安全感興趣的同學(xué)，可以參考下2021-05-05
本文主要介紹了js阻止移動端頁面滾動的兩種方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了微信小程序搜索功能(附：小程序前端+PHP后端)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
JavaScript實現(xiàn)煙花特效(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了JavaScript使用面向?qū)ο缶幊虒崿F(xiàn)煙花特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家介紹了Lottie動畫前端開發(fā)使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了JavaScript判斷對象是否為數(shù)組的三種方法,感興趣的小伙伴們可以參考一下2015-12-12
javascript簡單鏈?zhǔn)秸{(diào)用案例分析
這篇文章主要介紹了javascript簡單鏈?zhǔn)秸{(diào)用,結(jié)合具體實例形式模擬jQuery分析了鏈?zhǔn)秸{(diào)用的原理與具體實現(xiàn)技巧,需要的朋友可以參考下2017-05-05
IE6-IE9中tbody的innerHTML不能賦值的解決方法
這篇文章主要介紹了IE6-IE9中tbody的innerHTML不能賦值的解決方法,需要的朋友可以參考下2014-06-06
next.js?getServerSideProps源碼解析
這篇文章主要為大家介紹了next.js?getServerSideProps源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了javascript使用正則表達(dá)式檢測IP地址的方法,需要的朋友可以參考下2014-12-12