利用layer實(shí)現(xiàn)表單完美驗(yàn)證的方法
如下所示:
//基于layer框架之上,驗(yàn)證表單時(shí)引用。彈出提示錯(cuò)誤
function qxMsg(msgStr) {
layer.open({
type: 1,
title: '提示消息',
offset: '10%;',
content: '<div style="padding: 20px 80px;">'+msgStr+'</div>',
btn: '關(guān)閉',
btnAlign: 'c',
shade: 0.2,
yes: function() {
layer.closeAll();
}
});
}
上邊是封裝好的layer方法,下邊是結(jié)合表單開(kāi)始驗(yàn)證
//表單驗(yàn)證
function checkForm() {
var err = "";
if(!$('input[name="ggName"]').val()) {
err += "<br/>名稱不能為空";
}
if(!$('input[name="isId"]').val()) {
err += "<br/>空間分類不能為空";
}
if(err) {
err = err.substring(5);
qxMsg(err);
return 0;
}
return 1;
}
在ajax提交表單之前調(diào)checkForm方法即可,如:
//提交新增數(shù)據(jù)
function addGgBaseModel() {
var flag = checkForm();
if(flag == 0) return;
var formData = new FormData(document.getElementById("myform"));
formData.append("SysType", "10101");
formData.append("SysName", "qxPC");
formData.append("ModuleName", "規(guī)格型號(hào)");
$.ajax({
type: 'post',
url: _URL_BASE + '/ggBaseModel/addGgBaseModel ',
data: formData,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(retData) {
console.log(retData);
if(retData.ReturnType == "1001") {
qxMsg("添加成功");
$(".layui-layer-btn0").click(function() {
$('.modal-backdrop').remove();
$("#myModal").hide();
getGgBaseModel();
})
} else if(retData.ReturnType == "4004") {
kickout();
} else {
qxMsg(retData.Message);
}
},
error: function(retData) {
qxMsg("提交數(shù)據(jù)出錯(cuò)");
}
});
};
以上這篇利用layer實(shí)現(xiàn)表單完美驗(yàn)證的方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
7個(gè)讓JavaScript變得更好的注意事項(xiàng)
這篇文章主要介紹了7個(gè)讓JavaScript變得更好的注意事項(xiàng),十分詳盡,需要的朋友可以參考下2015-01-01
js確認(rèn)刪除對(duì)話框適用于a標(biāo)簽及submit
這篇文章主要介紹的是一個(gè)js確認(rèn)刪除對(duì)話框適用于a標(biāo)簽及submit,非常好用,需要的朋友不要錯(cuò)過(guò)2014-07-07
javascript 實(shí)現(xiàn)子父窗體互相傳值的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)javascript 實(shí)現(xiàn)子父窗體互相傳值的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
Echarts實(shí)現(xiàn)點(diǎn)擊列表聯(lián)動(dòng)餅圖的示例代碼
本文主要介紹了Echarts實(shí)現(xiàn)點(diǎn)擊列表聯(lián)動(dòng)餅圖的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
promise結(jié)合requestAnimationFrame用法示例
這篇文章主要為大家介紹了promise結(jié)合requestAnimationFrame用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11
簡(jiǎn)單實(shí)用的反饋表單無(wú)刷新提交帶驗(yàn)證
表單無(wú)刷新提交帶驗(yàn)證,非常適用于反饋,具體的實(shí)現(xiàn)如下包含各個(gè)功能代碼,喜歡的朋友可以參考下2013-11-11
使用typescript改造koa開(kāi)發(fā)框架的實(shí)現(xiàn)
這篇文章主要介紹了使用typescript改造koa開(kāi)發(fā)框架的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
javascript html5輕松實(shí)現(xiàn)拖動(dòng)功能
這篇文章主要為大家詳細(xì)介紹了javascript html5輕松實(shí)現(xiàn)拖動(dòng)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03

