layer html表单验证,利用layer实现表单完美验证的方法

如下所示：

//基于layer框架之上，验证表单时引用。弹出提示错误

function qxMsg(msgStr) {

layer.open({

type: 1,

title: '提示消息',

offset: '10%;',

content: '

'+msgStr+'

',

btn: '关闭',

btnAlign: 'c',

shade: 0.2,

yes: function() {

layer.closeAll();

}

});

}

上边是封装好的layer方法，下边是结合表单开始验证

//表单验证

function checkForm() {

var err = "";

if(!$('input[name="ggName"]').val()) {

err += "
名称不能为空";

}

if(!$('input[name="isId"]').val()) {

err += "
空间分类不能为空";

}

if(err) {

err = err.substring(5);

qxMsg(err);

return 0;

}

return 1;

}

在ajax提交表单之前调checkForm方法即可，如：

//提交新增数据

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", "规格型号");

$.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("提交数据出错");

}

});

};

以上这篇利用layer实现表单完美验证的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。