Universal form verification function

xiaoxiao2021-03-06 106

Whether it is a dynamic website, or other B / S structure, it is not inseparable from the form of the form to the server to submit the data to the server to submit a considerable role. This will lead to a problem, is it legal? The problem in front of us is to verify that the data submitted by these data is legal. So, we wrote a big pile of verification functions. When we started the development of a new project, we have to write a lot of verification. Function, then debug this large number of functions ...

This article will introduce a method to improve my credibility and improve our development efficiency.

Personally think that the verification of the form should contain two parts: First, determine whether the data entered by the user is legal. Second, prompting that the user is not legal.

Therefore, our generic form verification function to be implemented is: First, obtain the data GetValue (EL) of the user input, verify the user's data checkform (OFORM) IE supports custom properties, this is this universal function. Based we can add the properties of your own information on the form element. It is a bit like XML .check property: This property is used to store the regular expression of the data legitimacy. Warning property: This property is used to store error prompt information. Third, return incorrect form Tips Goback (EL) The trigger event of these three steps is onSubmit, remember that return checkform (this) is wrong, it is full of fullness:)

Writing here, the overall frame is coming out, obtaining a string to obtain a string, build a regular expression by obtaining the check attribute of the form element, and then verify its value. If the verification is submitted, if the data is not legal, the WARNING attribute of the form element will be obtained. Tip information. Return to the form element. The entire framework is relatively simple. What we have to do is write a good regular expression!

Next, let's analyze all the form elements according to their partnership, we divide them into three types of each type of form, and our goal is to write universal.

1. Wen input box text </ textarea> 2. Single multi-selection box choose <input type =" checkbox "name =" c "> <input type =" checkbox "name =" C "> <input type =" radio "name =" r "> <input type =" radio "name =" r "> 3. Single drop menu Select <select name =" SEL "> </ select> <select Name = "Sels" Multiple> </ select></p> <p>Telling a bunch of "大道" too abstract, code is more convincing!</p> <p>Check.js JS function file / * * --------------- Client table single pass authentication Checkform (OFORM) ----------------- * Function: General Verification All Form Elements. * Use: * <form name = "Form1" οnsubmit = "Return Checkform (this)"> * <input type = "text" name = "ID" Check = "^ / S $ "warning =" ID can't be empty, and can not contain spaces> * <input type = "submit"> * </ form> * author: wanghr100 (gray baby .NET) * Email: Wanghr100@126.com * Update: 19: 28 2004-8-23 * Note: Be careful when writing regular expressions. Don't let "people" have an empty diamond. * Has implemented: * For Text, Password, Hidden, File, Textarea, SELECT, Radio, Checkbox for legality verification * Waiting for the implementation: write the regular expression into a library. * --------------- Client table single pass Verification Checkform (OFORM) ----- ------------ * /// Main function function checkform (OFORM) {var els = = = ellex; // Traverse all table elements for (var i = 0; i <els.length; i ) {// Do you need to verify if (ELS [i] .CHECK) {// obtain the verified regular string var SREG = ELS [i] .Check; // Get the value of the form, with universal value VAR SVAL = GetValue (ELS [I]); // String -> Regular expression, not case sensitive VAR reg = new regexp (SREG, "I"); if (! Reg.test (sval)) {// Verification Do not pass, pop-up prompts WARNING Alert (ELS [i] .warning); // This form element acquires focus, use universal return function GOBACK (ELS [I]) Return False;}}}}}</p> <p>/ / Universal Value Function is divided into three categories // text input box, directly values EL.Value // Single multi-selection, traverse all options acquire the number of selected numbers "00" indicates that two /// Single plummete menu, traversing all options acquired the number of selected numbers Returns "0" indicates the type of Function getValue (EL) {// Var style = el.Type; switch (stype) {casse "text ": Case" hidden ": case" password ": case" file ": case" textarea ": return el.value; Case" Checkbox ": Case" Radio ": Return GetValuechoose (EL); Case" Select-One ": Case "select-multiple": return getValueSel (EL);} // acquire radio, checkbox's selection, use "0" to indicate the number of selected numbers, we can pass 0 {1,} when we write Select a number of function getValuechoose (el) {var svalue = ""; // get the NAME of the first element, search this element group VAR TMPELS = Document.GtelementsByname (El.Name); for (var i = 0; i < TMPELS.LENGTH; I ) {IF (TmPels [i] .checked) {sValue = "0";}} Return Svalue;} // Get selected in SELECT, use "0" to represent the number of selected numbers, we When writing is correct, you can use 0 {1,} to indicate a number of function getValueSel (el) {var svalue = ""; for (var i = 0; i <El.op Tions.Length; i ) {// radio drop box prompt option set to value = "" if (el.options [i] .selected && el.options [i] .value! = "") {sValue = " 0 ";}} returnitch svalue;}}}</p> <p>// General return function, verify that the effect is not returned. Take three types of value // text input box, the cursor is positioned in the end of the text input box // Single multi-selection, the first option acquisition focus // Single drop menu , Acquire FUNCTION GOBACK (EL) {// Type VAR Stype = El.Type; Switch (STYPE): Case "Hidden": Case "Password": Case "File": case " TEXTAREA ": El.focus (); var rng = el.createtextRange (); rng.collapse (false); rng.select (); Case" Checkbox ": Case" Radio ": var els = document.getElementsByName (el.) Name); ELS [0] .focus (); case "select-one": case "select-multiple": el.focus ();}}</p> <p>Demo.htm Demo File <script language = "javaScript" src = "check.js"> </ script> General form function test: <form name = "form1" οnsubmit = "Return Checkform (this)"> test: <input TYPE = "text" name = "test"> Do not verify <br> account: <input type = "check =" ^ / s $ "warning =" account can not be empty, and cannot contain space "name =" ID "> Cannot be empty <br> Password: <input type =" Password "check =" / s {6,} "warning =" password six or more "Name =" ID "> Six <BR> Phone: < Input type = "text" check = "^ / d $" warning = "phone number contains illegal characters" name = "Number" value = "> <br> Photo upload: <input type =" check = " * (/. jpg | /.bmp) $ "warning =" photo should be JPG, BMP format "name =" pic "value =" 1 "> <br> Birth Date: <input type =" text " Check = "^ / d {4} / - / d {1, 2} - / d {1, 2} $" warning = "date format 2004-08-10" name = "DT" value = ">" Format 2004-08-10 <br> 省:: <select name = "SEL" Check = "^ 0 $" Warning = "Please select the province"> <option value = "> Please select <option value =" 1 " > Fujian Province <option value = "2"> Hubei Province </ select> <br> Choose your favorite sport: <br> Swimming <input type = "checkbox" name = "c" check = "^ 0 {2, } $ "Warning =" Please select 2 or more "> Basketball <input type =" checkbox "name =" c "> football <input type =" checkbox "name =" c "> Volleyball <input type =" checkbox " Name = "c"> <br> Your qualifications: University <input type = "radio" name = "r" check = "^ 0 $"</p> <p>WARNING = "Please select an qualification"> Middle school <input type = "radio" name = "r"> primary school <input type = "radio" name = "r"> <br> personal introduction: <textarea name = "txts "Check =" ^ [/ s | / s] {20,} $ "warning =" personal introduction can't be empty, not less than 20 words "> </ textarea> 20 words <input type =" submit " > </ form> Addition: Microsoft Windows scripting technology, here there are regular expressions http://www.dqcn.net/net/9cbs/book/script56.chm a very good regular expression website, collected A lot of regular expressions. Take directly. Http://www.regexlib.com/default.aspx</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-124171.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="124171" 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.052</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 = '2rWBf2e5CDoCXTo7T_2FHhE14P16UC4FzaXy8SVFtYMY4ridXfyLga35SrnyBL6rp7G81J0xB0UNoK1oFZtmEZ5w_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>