Multiple verification of easyui forms, dynamic setting of easyui controls, and forms of easyui

Multiple verification of easyui forms, dynamic setting of easyui controls, and forms of easyui

Features to be implemented: when adding student information, use the easyui verification function to determine whether the student ID is repeated and the student ID can only be a number.

The final effect is as follows:

 

However, in this process, we encountered a series of problems:

Extended the validatebox verification method. The initial verification code is as follows:

1 // The student ID format can only be numbers ***** // No problem here ***** 2 number: {// The value of value is 3 validator: function (value) in the text box) {4 var reg =/^ [0-9] * $/; 5 return reg. test (value); 6}, 7 message: 'The student ID format is incorrect. '8 },

1 // The verification student id cannot be repeated 2 snumber: {3 // The param parameter is the id value of textarea 4 validator: function (value, param) {5 // put the json data obtained from the background into textarea, and then parse it into an array of 6 var snumbers = $. parseJSON ($ (param) [0]. val (); 7 for (var I = 0; I <snumbers. length; I ++) {8 if (value = snumbers [I]) {// if the student ID is repeated, return false 9 return false; 10} 11} 12 return true; 13}

Here, we will only repeat the student ID verification, because there are some other problems, but also encountered some problems:

The form is written in this way. The validType attribute is written in the data-options attribute:

1 <input id = "addSnumber" class = "easyui-textbox" style = "width: 200px; height: 30px; "type =" text "name =" snumber "data-options =" required: true, validType: 'snumber [# snumbers] ', missingMessage: 'Enter your student id '"/> 2 <textarea id =" snumbers "style =" display: none "> </textarea>

There is a problem here: in this case, an error will be reported when writing Firebug, because # snumbers needs to be caused by quotation marks, but an error will occur when directly adding quotation marks, which is equivalent to triple quotation marks, I have checked a lot of information on the Internet, and some cannot be escaped. I guess this is a problem with easyui parsing, unless the source code of easyui is changed. Please do not give me any further information if you know anything.

Then, place the validType attribute outside and verify it as follows:

1 <input id = "addSnumber" validType = "snumber ['# snumbers']" class = "easyui-textbox" style = "width: 200px; height: 30px; "type =" text "name =" snumber "data-options =" required: true, missingMessage: 'Enter your student id '"/> 2 <textarea id =" snumbers "style =" display: none "> </textarea>

 

Then a new problem arises. How can I add the student ID format verification?

I wrote it in this way. If it was unsuccessful, I still felt that it was a problem of triple quotation marks. The Firebug reported an error and tried various methods. It was invalid:

1 <input id = "addSnumber" validType = "['snumber ['# snumbers'] ', 'number']" class = "easyui-textbox" style = "width: 200px; height: 30px; "type =" text "name =" snumber "data-options =" required: true, missingMessage: 'Enter your student id '"/> 2 <textarea id =" snumbers "style =" display: none "> </textarea>

 

**************************************** ******************** **************************************** ****

 

Then I tried another method to dynamically load the easyui control, but there will still be the same problem when the two verifications are put together. Here I am definitely a problem with easyui parsing, so you don't have to worry about it.

There are two problems. One is how to put the data returned by ajax into the validType attribute, that is, to save data without another textarea.

The second problem is that the dynamic setting of the easyui control is invalid. To put it simply, the Code is as follows:

1 <input id="addSnumber" style="width: 200px; height: 30px;" type="text" name="snumber" />

1 // set easyui Control 2 $ ("# addSnumber "). attr ("class", "easyui-textbox"); 3 // sets the verification attribute 4 $ ("# addSnumber "). attr ("validType", "snumber ['# snumber']");

After setting the easyui control in jQuery as shown above, there is no effect. Baidu later, after dynamically adding the easy control, it needs to be re-rendered, as shown below:

1 // set easyui Control 2 $ ("# addSnumber "). attr ("class", "easyui-textbox"); 3 // sets the verification attribute 4 $ ("# addSnumber "). attr ("validType", "snumber ['# snumber']"); 5 // parse all pages 6 $. parser. parse ();

In this way, you can only parse a dom element after viewing the easyui api.

The following code does not work:

1 // set easyui Control 2 $ ("# addSnumber "). attr ("class", "easyui-textbox"); 3 // sets the verification attribute 4 $ ("# addSnumber "). attr ("validType", "snumber ['# snumber']"); 5 // parse the specified element 6 $. parser. parse ($ ("# addSnumber "));

After going through Baidu, I learned:

Parser only renders the child element of $ ("# addSnumber") and does not include $ ("# addSnumber") itself. Its child element does not contain any control class supported by Easyui, so this place won't get the desired effect.

Reference: how to solve the problem of automatically rendering after jQuery EasyUI dynamically adds controls or ajax loads pages

To render a single element, write it as follows:

1 // set easyui Control 2 $ ("# addSnumber "). attr ("class", "easyui-textbox"); 3 // sets the verification attribute 4 $ ("# addSnumber "). attr ("validType", "snumber ['# snumber']"); 5 // parse the specified Element and find its parent element 6 $. parser. parse ($ ("# addSnumber "). parent ());

 

**************************************** ************************* ********************

Back to the previous issue, the verification student ID cannot be repeated and the student ID format.

Finally, I checked various materials on the Internet and found that my thinking was not good, because I loaded all student numbers to the client and then verified, but there was a problem, if multiple users add student IDs during this period, they may be duplicated.

Therefore, the operation to obtain all student IDs is put into the verification function as follows:

1 // The verification student ID cannot be repeated. 2 snumber: {3 validator: function (value) {4 var flag = true; 5 $. ajax ({6 type: "post", 7 async: false, 8 url: "/sims/StudentServlet? Method = AllSNumber ", 9 success: function (data) {// load data in the verification function. After loading the data, judge that the input value is 10 var snumbers = $. parseJSON (data); 11 for (var I = 0; I <snumbers. length; I ++) {12 if (value = snumbers [I]) {13 flag = false; 14 break; 15} 16} 17} 18 }); 19 20 return flag; 21}, 22 message: 'student ID repeat' 23 },

The advantage of this writing is that the data can be loaded in real time for judgment, and the data will be loaded for judgment once when the form is submitted, and no parameters need to be input, there will be no more double quotation marks, but one drawback is that it will request the database many times, causing high server resource consumption.

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

1 // verify form 2 var validate = $ ("# editStuForm"). form ("validate"); 3 if (! Validate) {4 $. messager. alert ("message reminder", "Please check your input data! "," Warning "); 5 return; 6} else {7 // submit 8}

The form code is as follows:

1 <input id = "addSnumber" class = "easyui-textbox" validType = "'snumber', 'number'" style = "width: 200px; height: 30px; "type =" text "name =" snumber "data-options =" required: true, missingMessage: 'enter your student ID '"/>

After the validType attribute is placed out of data-options, it cannot be verified. Firebug reports an error !!!

Put it in data-options:

1 <input id = "addSnumber" class = "easyui-textbox" style = "width: 200px; height: 30px; "type =" text "name =" snumber "data-options =" required: true, validType: ['snumber', 'number'], missingMessage: 'Enter your student ID '"/>

OK, everything is fine. You can verify both of them !!!

 

Conclusion: easyui verification duplication and format, multiple Verification

1 // The student ID format can only be numbers 2 number: {// The value of value is 3 validator: function (value) in the text box) {4 var reg =/^ [0-9] * $/; 5 return reg. test (value); 6}, 7 message: 'The student ID format is incorrect. '8}, 9 // The verification student ID cannot be repeated. 10 snumber: {11 validator: function (value) {12 var flag = true; 13 $. ajax ({14 type: "post", 15 async: false, 16 url: "/sims/StudentServlet? Method = AllSNumber ", 17 success: function (data) {// load data in the verification function. After loading the data, judge the input value 18 var snumbers = $. parseJSON (data); 19 for (var I = 0; I <snumbers. length; I ++) {20 if (value = snumbers [I]) {21 flag = false; 22 break; 23} 24} 25} 26 }); 27 28 return flag; 29}, 30 message: 'student ID repetition '31 },

1 <tr> 2 <td> Student id: </td> 3 <td> 4 <input id = "addSnumber" class = "easyui-textbox" style = "width: 200px; height: 30px; "type =" text "name =" snumber "data-options =" required: true, validType: ['snumber', 'number'], missingMessage: 'Enter your student ID '"/> 5 </td> 6 </tr>

The final effect is as follows:

OK !!!

 

Most of them are summarized by myself. Many things do not understand the principle yet. I think it should be the problem of easyui. min. js. If something is wrong and you still have some questions, please kindly advise me !!