JS Verification framework of Realyeasy verification detailed _javascript Skills

Use Really_easy_field_validation_with_prototype to perform form validation, as follows

1, the first step is of course to introduce JS and CSS files first.

<link href= "${ctx}/skin/css/validation.css" rel= stylesheet "type=" Text/css "/> <script type= 
 
" text/ JavaScript "src=" ${ctx}/scripts/prototype.js "></script> <script type=" Text/javascript "src=" ${ctx 
 
}/scripts/effects.js "></script> 
 
<script type=" Text/javascript "src=" ${ctx}/scripts/validation.js "></script> 

2, then I added the following code at the beginning of the page (I put this code in the meta.jsp, because each JSP contains it in the header.) ）

function afterloaded () { 
 
  if (document.all) { 
 
    var forms = Document.forms; 
 
    if (Forms.length > 0) {for 
 
      (var i = 0; i < forms.length; i++) { 
 
        if (forms[i]["Method:save"]) 
 
          new Validation (Forms[i]); 
 
      } 
 
    Window.clearinterval (inteval); 
 
    Inteval = null; 
 
  } 
 
} 
 
var inteval = Window.setinterval ("afterloaded ();", 500);  

3. If you want to verify an input box, just add a few flags to his class. Such as

Copy Code code as follows:

<input type= "text" name= "Payable.howmuch" value= "id=" Payable_howmuch "class=" required Validate-number "/>"

This indicates that the field must be filled in and needs to be a number. Other content, look at the validation.js at the end of the code to understand.
4, in addition, I made some changes to validation.js, because we have a form with multiple submit button, and the general only Name=method:save button is clicked only need to trigger verification, so modified the validation js.
will be the original

Copy Code code as follows:

if (this.options.onSubmit) Event.observe (this.form, ' Submit ', this.onSubmit.bind (this), false);

Change to

Copy Code code as follows:

if (this.options.onSubmit) Event.observe (this.form["Method:save"], ' click ', This.onSubmit.bind (this), false);

This is a problem, but it's more appropriate for the way we are now.
5, the original CSS to the button and so on, so I put those border content have been removed.
6, this verification framework seems to consider only a number of circumstances, to be flexible to use the time to take a specific understanding of the line, but also provides a callback mechanism, download his original, in the HTML can be seen in the demo.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.