概述
检测表单中的不能为空（.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回调函数;
需要改进的地方：
暂无
复制代码 代码如下:
/// <reference path="vendor/jquery-1.4.1-vsdoc.js" />
*/
//$(document).ready(
// function () {
// $("form").find(".notnull").bind({
// focus: function () {
// if ($(this).attr("value") == this.defaultValue) {
// $(this).attr("value", "");
// }
// },
// 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) {
//当前表单的值
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])) {
///联系方式
case "mobile":
var reg = /^1d{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 = /^(Pd{7}|Gd{8}|Sd{7,8}|Dd+|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;
}
});
});
以上代码就是封装过之后的万能检测表单的方法了，希望小伙伴们喜欢
最后
以上就是积极小伙为你收集整理的封装好的一个万能检测表单的方法的全部内容，希望文章能够帮你解决封装好的一个万能检测表单的方法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复