Verification that cannot be empty (.notnull) in the detection form
Function : When there are multiple (including one) forms under a pair of form tags, use js to accurately judge which elements are made on the current button.
Usage : Find the container of the current form under the form tag to give class="form", and the submit button of the current form to give
The element that needs to be verified as empty is given class="notnull" nullmsg="xx cannot be null!" prompt, and the form that requires logical judgment is given class="need"
The type of judgment given (can only be numbers) Verification prompt logicmsg="XX can only be numbers"
Give class="errorMessage" to display error message block
Give class="warn" to display error message
Not using js object-oriented programming
Logical judgment, do not pass in the need identifier, directly give the regular expression attribute (custom) regex="/^/d$/" to make a judgment
Implemented externally
Global.submitCallback button callback function
Global.confirmCallback confirm callback function;
Where to improve:
None yet
The code copy is as follows:
/// <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);
// }
// }
// });
// }
//);
///* Method to encapsulate a universal detection form*/
///event.srcElement: The target object that raises an event, often used in onclick events.
///event.fromElement: The object source that raises the event, often used in onmouseout and onmouseover events.
///event.toElement: After the event is raised, the target source moved to by the mouse, which is often used for onmouseout and onmouseover events.
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("Submit")
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("Delete")
var sub = confirm($(button).attr("title"));
if (sub) {
Global.confirmCallback.call(this, [e]);
}
return sub;
} else {
// //alert("Other")
return true;
}
}
});
/*Detection of elements that cannot be empty in the form*/
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;
}
/*Required drop-down list in the detection form*/
function checkselect(form) {
var b = true;
$(form).find(".select").each(function (i) {
var ck = $(this).find('option:selected').text();
if (ck.indexOf("Select") > -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;
}
/*Required checkboxes in the detection form*/
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;
}
// Check whether the regular expression matches
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; //Cannot submit
}
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) {
//The current form value
var value = $(this).attr("value") || $(this).val();
var regx = eval($(this).attr("regex"));
return b = GetFlase(value, regx, this);
}
}
});
return b;
}
/// Check whether the corresponding characters entered by the user are legal
///This method is abandoned
function CheckInput(form) {
var b = true;
$(form).find(".need").each(function () {
if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
//The current form value
var value = $(this).attr("value");
//The value of id or the value of name attribute is as follows: [name="contact"]
var name = $(this).attr("class");
//Check whether the content you need to enter is legal, such as: Contact information
var len = name.split(" ");
for (var i = 0; i < len.length; i++) {
switch ($.trim(len[i])) {
///Contact information
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;
///Is the password the same for the two times
case "password":
break;
case "password2":
if ($("#password").attr("value") != $("#password2").attr("value")) {
$(this).select(); //Get focus
$(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
$(this).parents(".form").find(".errorMessage").show();
return b = false; //Cannot submit
}
break;
case "worktel":
case "hometel": //Home phone
var reg = /^/d{8}$/;
return b = GetFlase(value, reg, this);
break;
case "post": //Zip Code
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(); //Get focus
return b = false; //Cannot submit
break;
case "num":
var reg = /^/d+$/;
return b = GetFlase(value, reg, this);
break;
///The mainland needs to apply for a Hong Kong and Macau pass and a Hong Kong visa to go to Hong Kong. The format of private ordinary passport numbers is:
///14/15+7 digits, G+8 digits;
///The ordinary job is: P.+7 digits;
///The official business is: S.+7 digits or
//S+8 digits, the diplomatic passport starting with D is the
case "postport": //Passport number
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;
}
///This method has been abandoned
});
///Click to change background color
$(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;
}
});
});
The above code is the universal detection form after encapsulation. I hope you like it