layui.js實(shí)現(xiàn)的表單驗(yàn)證功能示例
更新時(shí)間：2017年11月15日 11:21:22 作者：我是高手高手高高手
這篇文章主要介紹了layui.js實(shí)現(xiàn)的表單驗(yàn)證功能,結(jié)合實(shí)例形式分析了基于layui.js的事件監(jiān)聽(tīng)、驗(yàn)證、判定等相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了layui.js實(shí)現(xiàn)的表單驗(yàn)證功能。分享給大家供大家參考，具體如下：
該示例可針對(duì)文本框，手機(jī)，郵箱，textarea等格式進(jìn)行驗(yà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="請(qǐng)輸入標(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="請(qǐng)輸入姓名" 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="請(qǐng)輸入手機(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="請(qǐng)輸入郵箱" 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="請(qǐng)輸入內(nèi)容">請(qǐng)輸入內(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驗(yàn)證代碼
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form()
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//自定義驗(yàn)證規(guī)則
form.verify({
title: function(value){
if(value.length < 5){
return '標(biāo)題至少得5個(gè)字符啊';
}
}, fname: function(value){
if(value.length < 4){
return '請(qǐng)輸入至少4位的用戶名';
}
}, contact: function(value){
if(value.length < 4){
return '內(nèi)容請(qǐng)輸入至少4個(gè)字符';
}
}
,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}$/, '郵箱格式不對(duì)']
});
//創(chuàng)建一個(gè)編輯器
layedit.build('LAY_demo_editor');
//監(jiān)聽(tīng)提交
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 表單驗(yàn)證</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="請(qǐng)輸入標(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="請(qǐng)輸入姓名" 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="請(qǐng)輸入手機(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="請(qǐng)輸入郵箱" 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="請(qǐng)輸入內(nèi)容">請(qǐng)輸入內(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;
//自定義驗(yàn)證規(guī)則
form.verify({
title: function(value){
if(value.length < 5){
return '標(biāo)題至少得5個(gè)字符啊';
}
}, fname: function(value){
if(value.length < 4){
return '請(qǐng)輸入至少4位的用戶名';
}
}, contact: function(value){
if(value.length < 4){
return '內(nèi)容請(qǐng)輸入至少4個(gè)字符';
}
}
,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}$/, '郵箱格式不對(duì)']
});
//創(chuàng)建一個(gè)編輯器
layedit.build('LAY_demo_editor');
//監(jiān)聽(tīng)提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最終的提交信息'
})
return false;
});
});
</script>
</body>
</html>
運(yùn)行效果如下：
附：layui插件源碼可點(diǎn)擊此處本站下載。
另外，其他驗(yàn)證功能還可參考本站http://www.dbjr.com.cn/article/96722.htm
希望本文所述對(duì)大家基于layui框架的程序設(shè)計(jì)有所幫助。
相關(guān)文章
原生JS中應(yīng)該禁止出現(xiàn)的寫(xiě)法
這篇文章主要介紹了原生JS中應(yīng)該禁止出現(xiàn)的寫(xiě)法，以提高代碼效率和安全性，對(duì)效率和安全感興趣的同學(xué)，可以參考下2021-05-05
js阻止移動(dòng)端頁(yè)面滾動(dòng)的兩種方法
本文主要介紹了js阻止移動(dòng)端頁(yè)面滾動(dòng)的兩種方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要介紹了微信小程序搜索功能(附：小程序前端+PHP后端)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
JavaScript實(shí)現(xiàn)煙花特效(面向?qū)ο?
這篇文章主要為大家詳細(xì)介紹了JavaScript使用面向?qū)ο缶幊虒?shí)現(xiàn)煙花特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Lottie動(dòng)畫(huà)前端開(kāi)發(fā)使用技巧
這篇文章主要為大家介紹了Lottie動(dòng)畫(huà)前端開(kāi)發(fā)使用技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了JavaScript判斷對(duì)象是否為數(shù)組的三種方法,感興趣的小伙伴們可以參考一下2015-12-12
javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用案例分析
這篇文章主要介紹了javascript簡(jiǎn)單鏈?zhǔn)秸{(diào)用,結(jié)合具體實(shí)例形式模擬jQuery分析了鏈?zhǔn)秸{(diào)用的原理與具體實(shí)現(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á)式檢測(cè)IP地址
這篇文章主要介紹了javascript使用正則表達(dá)式檢測(cè)IP地址的方法,需要的朋友可以參考下2014-12-12