封装好的一个万能检测表单的方法-eolink官网

封装好的一个万能检测表单的方法

检测表单中的不能为空（.notnull）的验证

作用：一对form标签下有多个（包括一个）表单需要提交时，使用js准确的判断当前按钮对那些元素做判断

用法：在form标签下找到当前表单的容器给予class="form"，当前表单的提交按钮给予 class="check"

需要验证为空的元素给予class="notnull" nullmsg="xx不能为空！"提示，需要进行逻辑判断的表单给予class="need"

判断的类型给予 class="num"(只能是数字) 验证的提示 logicmsg="XX只能是数字"

给予class="errorMessage"显示错误信息块

给予class="warn"显示错误信息

未使用js面向对象编程

逻辑判断，不传入need标识，直接给出正则表达式属性（自定义）regex="/^\d$/" 做出判断

在外部实现

Global.submitCallback button回调函数

Global.confirmCallback confirm回调函数;

需要改进的地方：

暂无

复制代码代码如下:

///

//$(document).ready(

// function () {

// $("form").find(".notnull").bind({

// focus: function () {

// if ($(this).attr("value") == this.defaultValue) {

// $(this).attr("value", "");

// }

kTnlxHAulS// },

// blur: function () {

// if ($(this).attr("value") == "") {

// $(this).attr("value", this.defaultValue);

// }

// });

// }

//);

///*封装一个万能检测表单的方法*/

///event.srcElement：引发事件的目标对象，常用于onclick事件。

///event.fromElement：引发事件的对象源，常用于onmouseout和onmouseover事件。

///event.toElement：引发事件后，鼠标移动到的目标源，常用于onmouseout和onmouseover事件。

function Global() {

var _self = this;

}

Global.submitCallback = null;

Global.confirmCallback = null;

$(document).ready(function () {

//form body

$("body").find(".form").each(function () {

this.onclick = function (e) {

var button = null;

try {

button = e.srcElement == null ? document.activeElement : e.srcElement;

} catch (e) {

console.log(e.message)

button = document.activeElement;

}

if ($(button).is(".check")) {

//alert("提交")

var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this));

if (sub) {

// Call our callback, but using our own instance as the context

Global.submitCallback.call(this, [e]);

}

return sub;

} else if ($(button).is(".confirm")) {

//alert("删除")

var sub = confirm($(button).attr("title"));

if (sub) {

Global.confirmCallback.call(this, [e]);

}

return sub;

} else {

// //alert("其它")

return true;

}

});

/*检测表单中不能为空的元素*/

function checkform(form) {

var b = true;

$(form).find(".notnull").each(function () {

if ($.trim($(this).val()).length <= 0) {//|| $(this).val() == this.defaultValue

// if (this.value != null) {

// $(this).attr("value", "");

// }

//alert($(this).attr("msg"))

$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));

$(this).parents(".form").find(".errorMessage").show();

$(this).select();

$(this).focus();

return b = false;

}

});

if (b == true) {

$(form).find(".warn").text("");

$(form).find(".errorMessage").hide();

}

return b;

}

/*检测表单中必选的下拉列表*/

function checkselect(form) {

var b = true;

$(form).find(".select").each(function (i) {

var ck = $(this).find('option:selected').text();

if (ck.indexOf("选择") > -1) {

$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));

$(this).parents(".form").find(".errorMessage").show();

$(this).select();

$(this).focus();

return b = false;

}

});

return b;

}

/*检测表单中必选的复选框*/

function checkChecked(form) {

var b = true;

$(form).find(".checkbox").each(function (i) {

var ck = $(this)[0].checked;

if (!ck) {

$(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));

$(this).parents(".form").find(".errorMessage").show();

$(this).select();

$(this).focus();

return b = false;

}

});

return b;

}

//检查是否匹配该正则表达式

function GetFlase(value, reg, ele) {

if (reg.test(value)) {

return true;

}

$(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));

$(ele).parents(".form").find(".errorMessage").show();

$(ele).focus();

$(ele).select();

return false; //不能提交

}

function CheckInputRex(form) {

var b = true;

$(form).find("input[type='text']").each(function () {

if (typeof ($(this).attr("regex")) == 'string') {

if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {

//当前表单的值

var value = $(this).attr("value") || $(this).val();

var regx = eval($(this).attr("regex"));

return b = GetFlase(value, regx, this);

}

});

return b;

}

///检查用户输入的相应的字符是否合法

///此方法已废弃

function CheckInput(form) {

var b = true;

$(form).find(".need").each(function () {

if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {

//当前表单的值

&http://nbsp; var value = $(this).attr("value");

//id的值或者name的属性的值如：[name="contact"]

var name = $(this).attr("class");

//检查需要输入的内容是否合法如：联系方式

var len = name.split(" ");

for (var i = 0; i < len.length; i++) {

switch ($.trim(len[i])) {

&nhttp://bsp; ///联系方式

case "mobile":

var reg = /^1\d{10}$/;

return b = GetFlase(value, reg, this);

break;

///邮箱

case "email":

var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;

return b = GetFlase(value, reg, this);

break;

///两次密码是否一致

case "password":

break;

case "password2":

if ($("#password").attr("value") != $("#password2").attr("value")) {

$(this).select(); //获取焦点

$(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));

$(this).parents(".form").find(".errorMessage").show();

return b = false; //不能提交

}

break;

case "worktel":

case "hometel": //家庭电话

var reg = /^\d{8}$/;

return b = GetFlase(value, reg, this);

break;

case "post": //邮编

var reg = /^\d{6}$/;

return b = GetFlase(value, reg, this);

break;

case "bonus":

case "allowance":

case "FixedSalary":

var reg = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0|[1-9]\d)$/;

return b = GetFlase(value, reg, this);

break;

case "identity":

var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

return b = GetFlase(value, reg, this);

break;

case "height":

var reg = /^[1-2][0-9][0-9]$/;

return b = GetFlase(value, reg, this);

break;

case "qq":

var reg = /^[1-9][0-9]{4,}$/;

return b = GetFlase(value, reg, this);

break;

case "begintime":

case "endtime":

var reg = /^\d{4}$/;

if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val()))) {

return b;

}

$.ligerDialog.alert($(this).attr("msg"))

$(this).select(); //获取焦点

return b = false; //不能提交

break;

case "num":

var reg = /^\d+$/;

return b = GetFlase(value, reg, this);

break;

///大陆去香港需要办理往来港澳通行证和香港的签注.因私普通护照号码格式有:

///14/15+7位数,G+8位数；

///因公普通的是:P.+7位数；

///公务的是：S.+7位数或者

//S+8位数,以D开头的是外交护照

case "postport": //护照号码

var reg = /^(P\d{7}|G\d{8}|S\d{7,8}|D\d+|1[4,5]\d{7})$/;

return b = GetFlase(value, reg, this);

break;

case "bankaccount":

var reg = /^[0-9]{19}$/;

return b = GetFlase(value, reg, this);

break;

} //switch

} //for

}

});

return b;

}

///此方法已经废弃

});

///单击改变背景颜色

$(document).ready(function () {

var inputs = $("#top>.c>input");

$(inputs).each(function () {

this.onclick = function () {

document.getElementById("main").style.backgroundColor = this.name;

//$("#main").backgroundColor = this.name;

}

});

以上代码就是封装过之后的万能检测表单的方法了，希望小伙伴们喜欢

Iterator与LIstIterator接口在java中的区别有哪些

213 2023-08-05

封装好的一个万能检测表单的方法

java中的接口是类吗

vue项目接口域名动态的获取方法

Iterator与LIstIterator接口在java中的区别有哪些

推荐文章

接口调用是什么意思？几种常用接口调用方式

接口设计原则

8款在线 API 接口文档管理工具

api管理系统是什么？

什么是接口调试？接口调试的步骤有哪些？

api 接口管理系统有哪些？

接口测试有几种测试方法

API文档生成工具有哪些？

微服务和api网关区别

交换机配置步骤

最近发表

热评文章

在线接口文档管理工具推荐，支持在线测试，HTTP接口

开源的在线接口文档wiki工具Mindoc的介绍与使

如何优雅的进行接口设计？接口设计的六大原则是什么？

什么是API测试,api检测公司

软件接口设计怎么做？前后端分离软件接口设计思路

接口管理平台推荐，几大接口管理平台总有一款适合你！