jquery Plugin Easyui Implement form validation sample _jquery

What to implement: When you add student information, use the validation function of Easyui to determine whether the school number is repeated and the number can only be a number

The final effect is shown below:

In the process of doing this, however, a series of problems have been encountered:

Extend the Validatebox authentication method, starting with the following authentication code:

Number format can only be digital  ****//there's no problem. * * Number
: {//value value is the value in the text box
  validator:function (value) {
    var reg =/^[0-9] *$/;
    return reg.test (value);
  }, Message
  : ' The Learning number format is incorrect. '
},
//validation number cannot be repeated
snumber: {
   // The param parameter is textarea ID value
   validator:function (value, param) {
     //The JSON data retrieved from the background is first put into the textarea and then parsed into the array
     var snumbers = $.parsejson ($ (param) [0].val ());
     for (Var i=0;i < snumbers.length;i++) {if
       (value = = Snumbers[i]) {//If the school number has repeated returns false return False
         ;
       }
     } return
     true;
 }

There are a number of repeat verification, because there are some other problems, but also encountered some problems:

This is how the form started, and the Validtype attribute is written in the Data-options attribute:

<input id= "Addsnumber" class= "Easyui-textbox" style= "width:200px"; height:30px "type=" text "name=" Snumber "data-options=" Required:true,validtype: ' snumber[#snumbers] ', Missingmessage: ' Please enter the school number ' "/> <textarea id=" snumbers "style=" Display:none "
></textarea>

Here is a problem: This write Firebug will be an error, because the #snumbers need to be quoted, but direct quotes will be wrong, here is equivalent to Sanchong quotes, the internet to check a lot of information, some with escape, are not workable, I guess here is the problem of EASYUI resolution, Unless you change the Easyui source code. Have great God know also please do not hesitate to enlighten.
The Validtype property is then placed outside, and the validation succeeds as follows:

<input id= "Addsnumber" validtype= "snumber[' #snumbers"] "class=" Easyui-textbox "style=" width:200px; height:30px "type=" text "name=" Snumber "data-options=" Required:true, Missingmessage: ' Please enter the school number ' "/>
< TextArea id= "Snumbers" style= "Display:none" ></textarea>

Then the new problem arises again, how to add the number format validation?

I wrote this, not successful, feeling or Sanchong quotes problems, firebug error, various methods have tried, invalid:

<input id= "Addsnumber" validtype= "[' snumber[' #snumbers '] ', ' number ']" class= "Easyui-textbox" style= "width:200px; height:30px "type=" text "name=" Snumber "data-options=" Required:true, Missingmessage: ' Please enter the school number ' "/>
< TextArea id= "Snumbers" style= "Display:none" ></textarea>

Then I tried another way, dynamically loading the Easyui control, but the two validation put together will have the same problem, here I am certainly easyui resolution of the problem, it is not tangled.

Here are two problems, one is how the Ajax returned data into the Validtype attribute, is not to save another textarea data, unresolved ... Ask for guidance

The second is to dynamically set the Easyui control invalid problem, in short, the code is as follows:

<input id= "Addsnumber" style= "width:200px; height:30px type= "text" name= "Snumber"/>
//Set Easyui control
$ ("#addSnumber"). attr ("Class", "Easyui-textbox ");
Set the Validation property
$ ("#addSnumber"). attr ("Validtype", "snumber[' #snumber ')");
Above this in jquery set the Easyui control, no effect, and then Baidu, the dynamic add easy control after the need to render under the following:
//Set the Easyui control
$ ("#addSnumber"). attr ("Class", "Easyui-textbox");
Set the Validation property
$ ("#addSnumber"). attr ("Validtype", "snumber[' #snumber ')");
Parse All pages
$.parser.parse ();

This is OK, but after viewing the Easyui API, you can only parse a DOM element.

The following code has no effect:

Set the Easyui control
$ ("#addSnumber"). attr ("Class", "Easyui-textbox");
Set the Validation property
$ ("#addSnumber"). attr ("Validtype", "snumber[' #snumber ')");
Resolves the specified element
$.parser.parse ($ ("#addSnumber"));

After the Baidu after the learned:

Parser only renders the descendants of $ ("#addSnumber") and does not include $ ("#addSnumber") itself, and its descendants do not contain any Easyui-supported control class, so this place will not get the desired effect.

So to render a single element, write as follows:

Set the Easyui control
$ ("#addSnumber"). attr ("Class", "Easyui-textbox");
Set the Validation property
$ ("#addSnumber"). attr ("Validtype", "snumber[' #snumber ')");
Resolves the specified element, looking for its parent element
$.parser.parse ($ ("#addSnumber"). Parent ());

Back to the previous question, the validation number cannot be repeated and the number format.

Finally, the internet looked at all kinds of information, found that my thinking is not good, because I was first to load all the number to the client and then verify, but this has a problem, if more than one user in this period added the school number will likely lead to duplication.

So at the end of the process, get all the numbers in the validation function, as follows:

The validation number cannot be repeated
snumber: {
  validator:function (value) {
    var flag = true;
    $.ajax ({
      type: "Post",
      async:false,
      URL: "/sims/studentservlet?method=allsnumber",
      success: function (data) {///in the validation function in Riga, the value of the input after loading to judge
        var snumbers = $.parsejson (data);
        for (Var i=0;i < snumbers.length;i++) {
          if (value = = Snumbers[i]) {
            flag = false;
            break;
          }}}
    );
    
    return flag.
  }, Message
  : ' Learn number repeat '
},

The advantage of this writing is: You can load data in real time to judge, when submitting the form will also load the data to judge once, and do not need to pass the parameters, there will be no triple quotes problems; but there is a drawback is that many times the request of the database, server resource consumption is large.

When submitting a form, add the following sentence to verify the form:

Verify Form
var validate = $ ("#editStuForm"). Form ("Validate");
if (!validate) {
$.messager.alert ("Message reminder", "Please check the data you entered!", "warning");
return;
} else{
//Submit
}

Here's another question, the form code is as follows:

<input id= "Addsnumber" class= "Easyui-textbox" validtype= "' snumber ', ' Number '" style= "width:200px; height:30px "type=" text "name=" Snumber "data-options=" Required:true, Missingmessage: ' Please enter the school number ' "/>

Here the Validtype attribute is placed outside the data-options, can not verify, FIREBUG will error!!!

Finally put it in the data-options:

<input id= "Addsnumber" class= "Easyui-textbox" style= "width:200px"; height:30px "type=" text "name=" Snumber "data-options=" required:true, validtype:[' snumber ', ' number '], Missingmessage: ' Please enter the school number '/>

OK, all right, two verification can be!!!
Summary: Easyui validation Repetition and format, multiple validation

//School number format can only be number: {//value value is the value in the text box Validator:function (value) {var reg =/^[0-9]
    *$/;
  return reg.test (value);
    Message: ' The study number format is not correct. '///validation number cannot be repeated snumber: {validator:function (value) {var flag = true; $.ajax ({type: "Post", Async:false, url: "/sims/studentservlet?method=allsnumber", success:funct
        Ion (data) {///in the validation function in Riga, the value of the input is evaluated var snumbers = $.parsejson (data);
            for (Var i=0;i < snumbers.length;i++) {if (value = = Snumbers[i]) {flag = false;
          Break
    
    }
        }
      }
    });
  return flag; }, Message: ' Learn number repeat '}, 

<tr>
  <td> School Number:</td>
  <td>
     <input id= "Addsnumber" class= "Easyui-textbox" style = "width:200px; height:30px "type=" text "name=" Snumber "data-options=" required:true, validtype:[' snumber ', ' number '], Missingmessage: ' Please enter the school number ' '/>
  </td>
</tr>

The final effect is shown below:

Ok!!!
Most of them have tried to sum up many times, a lot of things still do not understand the principle, I think it should be the problem of easyui.min.js, but also need to continue to learn, I hope this article can help everyone.