The general solution of client data check ---- Wonderful Properties We know, HTML text box elements can use Type, Name, Value, Size, Maxlength, but you have thought We can also customize some properties. The author discovered this little secret in an extremely chance, and did not think of it. This little secret can help us very busy --- to realize the general verification of client data, from this client The test work is easy to do, no need to write JavaScript check code for each Form form. Please see the following test web pages unverify_test.html:
Based on custom attributes </ title> <meta http-equiv = "Content-Type" content = "text / html; charset = gb2312"> </ head> <script language = "javascript" src = "univerify.js"> </ script> <body> <br> <br> < CENTER> Client unified detection method based on custom attribute </ center> <form name = "form1" method = "post" action = "" οnsubmit = "Return VerifyAll (Form1);"> <center> <table align = "center" border = "1" bordercolor = "# aaeeff" cellpadding = "1" cellspacing = "0" width = "580"> <tr> <td> <img id = IMG_NAME SRC = "img / space.gif" > </ td> <td> Name: </ td> <TD> <input type = "text" name = "name" chname = "name" size = "10" maxlength = "10" maxsize = "10" NULLABLE = "NO" DATATYPE = "TEXT" Onblur = "VerifyInput (this);"> <font color = "red"> * </ font> <img id = IMG_AGE SRC = "img / space.gif"> </ td> <td> Age: </ td> <TD> <input type = "text" name = "age" chname = "size =" 3 "maxlength =" 3 "MAXSIZE =" 3 "nullable =" no "datatype =" Number "onblur =" verifyInput (this); "> <font color =" red "> * </ font> </ td> <tr> <td> < IMG ID = IMG_ADDRESS SRC = "IMG / Space.gif"> </ td> <td> address:</p>
<p></ td> <TD> <input type = "text" name = "address" chname = "address" size = "40" maxLENGTH = "100" maxSize = "100" nullable = "yes" datatype = "text" onblur = "VerifyInput (this);"> </ td> </ tr> <tr height = 48px> <td color = 3 align = center> <input type = "submit" name = "" value = "detection all input And submit "> </ td> </ TR> </ Table> </ center> </ form> </ html> The above form of forms Form1 has three text boxes, name (name), age (AGE) and address Address. The author defines four new properties for these three text boxes, namely: 1, chname: indicating the Chinese name of the data, which is used to verify the error. 2. MaxSize: Indicates the maximum length allowed to be entered, which is calculated in master. 3, NULLABLE: Indicates whether the input value is allowed to be empty. Allow empty when YES. 4, DATATYPE: Indicates the data type of the input value. This data type user can define it as needed, it is important to note that the corresponding check function is added to the JavaScript file univerify.js that will be described below for each new data type, thereby implementing a unified check. The three text boxes capture the lost focus events: Onblur = "VerifyInput (this);". Check if the value of this box is legal with verifyInput when you lose the focus.</p>
<p>The Form1 form captures the onSubmit event: οnsubmit = "Return VerifyAll (this);". When the user submits the form, verify the value of the element of this form with verifyAll, verify its legality, and ensure that there is no exception when the database is stored. The contents of the JavaScript Library Univerify.js referenced by the above webpages are as follows:</p>
<p>/ ************************************************** ***** * // filename: univerify.js * // * function: unity based on a custom attribute detection Javascript libraries // * * author: vertical and horizontal software production center rain also odd (zhsoft88@sohu.com * // **************************************************** ******** // * get the byte length of the string * / function strlen (STR) {var i; var len; len = 0; for (i = 0; i <str.length; i ) {IF (Str.Charcodeat (I)> 255) LEN = 2; Else Len ;} return len;} / * Detection string is empty * / function isnull (STR) {var i; for (i = 0; i <str.length; i ) {IF (Str.Charat (i)! = ') Return False;} Return true;} / * Detection string is full of numbers * / function isnumber (str) {var number_chars = " 1234567890 "; var i; for (i = 0; i <str.length; i ) {if (Number_Chars.indexof (Str.Charat (i)) == - 1) Return False;} return true;} / * Detection Specify whether text box input is legal * / function verifyinput (input) {var image; var i; var error = false; / * Length check * / if (strlen (Input.Value)> PARSEINT (Input.MaxSize) {Alert (Input.chname "exceeds the maximum length" INPUT.MAXSIZE); error = true;} else / * Non-air check * / if (Input.null == "No" && isnull (Input.Value) {Alert (Input .chname "can't be empty"); error = true;} else {/ * data type Check * / switch (Input.DataType) {copy "number": if (ISNumber (Input.Value) == false) {Alert (Input.chname "value is all numbers"); error = true;} Break; / * You can add a number of custom data types here to check the verification judgment * // * Case DataType1: ...; ...; * // * Case DataType2: ...; .... .................................. * / default: Break;}} / * According to the error setting or cancel the alert Sign * / if (error) {image = document.getlementByid ("img _" input.name); image.src = "img / warning.gif"; return false;} else {image = document.getElementById ("IMG_" INPUT.NAME);</p>
<p>Image.src = "img / space.gif"; return true;}} / * Detects Elements specified for Form form (elements that have custom properties) are legal, this function is used for the list of Onsubmit events * / function verifyall (myform) {var i; for (i = 0; i <myform.ements.length; i ) {/ * Elements of non-custom properties are not ignored * / if (MyForm.erements [i] .chname "==" undefined ") Continue; / * Check the current element * / if (verifyInput (MyForm.erements [i]) == false) {myform.ersion [i] .focus (); returnaf false;}} Return True;} In Univerify.js, verifyAll is used to verify the data of the specified form, which is universally specified by extracting the elements in the form one by one, and is versatile. VerifyInput is a function that actually performs data check. If there is a new data type DataType needs to be detected, the user can add and expandable in this function. Below is a screen for browsing the univery_test.html page: using a custom attribute-based client unified detection method, it is very simple to do: 1,</p>
<p>Embed a unified detection in web files JavaScript Library: <script language = "javascript" src = "univerify.js"> </ script> _fcksavedURL = "" UniveriFy.js "> </ script>" 2,</p>
<p>Add an onSubmit event handler to the form used: οnSubmit = "Return VerifyAll (this);". The this is specified as the current form object, do not provide a form specific name, which is very versatile. 3,</p>
<p>Add four custom properties for each text box that needs to be detected. If you want to check the data while you want to lose the focus, add an event handler: Onblur = "VerifyInput (this);". how about it? After unified detection methods based on custom attributes, you don't have to write similar detection codes for each form, you will have enough inspections. Summary: Custom attribute is a very useful attribute that is extremely useful for client data based on custom attributes, which is extremely useful in B / S development, convenient to use, and can be expandable. I believe that the reader has practically, and can self-enactment.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-34787.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="34787" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.040</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'VJS7bwjuR9ouilnffBxhdn8UQ78YsdYmIhnWGafYDIAizoSx3fGnLJmvrY1H8FDaIBkIADeraf1yoKs38CBXlA_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
