General js Data Detection Method (only general functions of js end are completed, and php end code will be appended as soon as possible)

Common js Data Detection Methods. Currently, only the general functions of the js end are completed. The php end code will be appended. Users can only specify the detection type at the php point, and the client js detection code will be automatically generated, in this way, only one detection code is defined to implement all detection on the client server, making program creation more convenient. Exit the js Code below.

SubmitCheckFunc. js

//************************************** ****************
// Common JS client data detection v1.0.10751105
// Author: ljl_xyf http://www.my400800.cn
//************************************** ****************/
Function submitCheckFunc (){
This. CheckObjArr = Array ();
}
SubmitCheckFunc. prototype = {
ErrMsg :"",
ErrObj: Array (),
CheckObjArr: Array (), // store the object to be detected
SetFocusObj: null,
// ____________________ Null Object judgment __________________
IsNotNull: function (checkId ){
Var checkobj = this. GetElementX (checkId );
StrType = checkobj. type;
If (strType. indexOf ("select") <0 ){
Var checkvalue = checkobj. value;
If (_ IsNull (checkvalue )){
Return false;
}
} Else {
Var blCheckOk = false;
For (var I = checkobj. length-1; I> = 0; I --){
Var rOption = checkobj [I];
If (rOption. selected = true ){
If (rOption. value! = ""){
BlCheckOk = true;
}
}
}
Return blCheckOk;
}
Return true;

},

// ____________________ Whether it is a digital detection ______________
IsFloat: function (oNum ){
If (! ONum) return false;
Var strP =/^ \ d + (\. \ d + )? $ /;
If (! StrP. test (oNum )){
Return false;
}
Try {
If (parseFloat (oNum )! = ONum ){
Return false;
}
} Catch (ex ){
Return false;
}
Return true;

},

// ____________________ Verify the integer ____________________
IsInteger: function (checkNum ){
Var regu =/^ [-] {0, 1} [0-9] {1,} $ /;
Return regu. test (checkNum );
},

// ____________________ Verify the email address ________________
IsEmail: function (strEmail ){
If (strEmail. search (/^ \ w + (-\ w +) | (\. \ w +) * \ @ [A-Za-z0-9] + ((\. |-) [A-Za-z0-9] + )*\. [A-Za-z0-9] + $ /)! =-1)
Return true;
Return false;
},

// ____________________ Is less than the maximum ______________
IsLessMax: function (strValue, strMaxValue ){

If (this. IsFloat (strValue )){
If (strValue/1)> (strMaxValue/1 )){
Return false;
}
}
Return true;

},

// ____________________ Whether it is greater than the minimum value ______________
IsGreaterMin: function (strValue, strMaxValue ){
If (this. IsFloat (strValue )){
If (strValue/1) <(strMaxValue/1 )){
Return false;
}
}
Return true;
},

// ____________________ Whether it is smaller than the maximum length ____________
IsLessMaxLen: function (strValue, iMaxlen ){
If (! This. _ isNull (strValue )){
If (strValue. length> iMaxlen ){
Return false;
}
}
Return true;
},

// ____________________ Whether it is greater than the minimum length ____________
IsGreaterMinLen: function (strValue, iMinlen ){
If (! This. _ isNull (strValue )){
If (strValue. length <iMinlen ){
Return false;
}
}
Return true;
},

// ____________________ Is it a date detection ______________
IsDate: function (strValue ){
// If it is null, it passes verification.
If (this. _ isNull (strValue ))
Return true;
Var pattern =/^ (d {4}) | (d {2})-(d {1, 2})-(d {1, 2}) $/g;
If (! Pattern. test (strValue ))
Return false;
Var arrDate = strValue. split ("-");
If (parseInt (arrDate [0], 10) <100)
ArrDate [0] = 2000 + parseInt (arrDate [0], 10) + "";
Var date = new Date (arrDate [0], (parseInt (arrDate [1], 10)-1) + "", arrDate [2]);
If (date. getYear () = arrDate [0]
& Date. getMonth () = (parseInt (arrDate [1], 10)-1) + ""
& Date. getDate () = arrDate [2])
Return true;
Else
Return false;

},

// ____________________ Data Detection ___________________
Check: function (){
This. ErrMsg = "";
This. ErrObj = Array ();
Var checkOneObj = null;
This. SetFocusObj = null;
// Clear the error message Style
This. Clear ();
// Check project information
For (var I = 0; I <this. CheckObjArr. length; I ++ ){
CheckOneObj = this. CheckObjArr [I];
Var checkOnedataObj = null;
For (var j = 0; j <checkOneObj [2]. length; j ++ ){
CheckOnedataObj = checkOneObj [2] [j];
Var checkObj = this. GetElementX (checkOneObj [0]);
Var checkFunc;
If ("IsNotNull" = checkOnedataObj [0]) {
CheckFunc = "this." + checkOnedataObj [0] + "('" + checkOneObj [0] + "', '" + checkOnedataObj [1] + "')";
} Else {
CheckFunc = "this." + checkOnedataObj [0] + "('" + checkObj. value + "', '" + checkOnedataObj [1] + "')";
}

// Alert (checkFunc );
Var checkBL = eval (checkFunc );
If (! CheckBL ){
This. ErrMsg + = "<li>" + checkOnedataObj [2] + "</li> ";
CheckObj. style. backgroundColor = "yellow ";
CheckObj. title = checkOnedataObj [2];
If (this. SetFocusObj = null ){
This. SetFocusObj = checkObj;
}
Break;
}
}
}

If (this. _ isNull (this. ErrMsg )){
Return true;
} Else {
Var errMsgObj = this. GetElementX ("errMsg ");
If (errMsgObj ){
ErrMsgObj. innerHTML = this. ErrMsg;
} Else {
Alert (this. ErrMsg );
}
This. SetFocusObj. focus ();
Return false;
}
},

// ____________________ Style clearing processing ________________
Clear: function (){
For (var I = 0; I <this. CheckObjArr. length; I ++ ){
CheckOneObj = this. CheckObjArr [I];
Var checkObj = this. GetElementX (checkOneObj [0]);
CheckObj. style. backgroundColor = "";
CheckObj. title = "";
Var errMsgObj = this. GetElementX ("errMsg ");
If (errMsgObj ){
ErrMsgObj. innerHTML = "";
}
}
},

// ____________________ Add the data to be checked __________
AddCheckData: function (checkObj ){
This. CheckObjArr [this. CheckObjArr. length] = checkObj;
},

//************************************** * Common functions * start ********************* ***
// ____________________ Obtain the specified name object ____________
GetElementX: function (objName ){
If (document. getElementById (objName )){
Return document. getElementById (objName );
} Else if (document. getElementById (objName. split ('$'). join ('_'))){
Return document. getElementById (objName. split ('$'). join ('_'));
} Else {
Return null;
}
},

// ____________________ Project empty detection _________________
_ IsNull: function (value ){
Var str = value;
If (str. length = 0 ){
Return true;
} Else {
Return false;
}
}
//************************************** **************** ********
}

HTML files for testing

<Html>
<Head>
<Title> </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Script src = "js/submitCheckFunc. js"> </script>

</Head>
<Body>
Name: <input id = "name" value = ""> <br>
Age: <input id = "age" value = ""> <br>
Url: <input id = "url" value = "http://www.my400800.cn"> <br>
<Script>
Function check (){
Var checkFrom = new submitCheckFunc ();
CheckFrom. addCheckData (["name", "name", [["IsNotNull", "", "name cannot be blank"], ["IsLessMaxLen", "10 ", "The name cannot exceed 10 characters"]);
CheckFrom. addCheckData (["age", "age", [["IsNotNull", "", "age cannot be blank"], ["IsInteger ","", "Age input is not a numerical value"], ["IsLessMax", "150", "the maximum age cannot exceed 150"]);
CheckFrom. addCheckData (["url", "url", [["IsNotNull", "", "url cannot be blank"], ["IsLessMaxLen", "150 ", "The website cannot contain a maximum of 150 characters"]);
 
CheckFrom. Check ();


}

</Script>
<Input type = "button" value = "test" onclick = "check ();">

<Ul id = "errMsg" style = "color: red">

</Ul>
</Body>
</Html>

The effect is as follows:

New Page Effect

Name:
Age:
URL:

Click the page effect after detection

Name:
Age:
URL:

• Name cannot be blank
• Age cannot be blank
• URL cannot be blank

Input data detection results

Name:
Age:
URL:

• Name cannot be blank