Jquery plug-in easyUi Form Verification example _ jquery

This article mainly introduces the Jquery plug-in easyUi to implement Form Verification examples. For more information, see the functions to be implemented: when adding student information, the easyui verification function is used 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:

// The student ID format can only be numbers ***** // No problem here ***** number: {// The value of value is the value of validator: function (value) in the text box) {var reg =/^ [0-9] * $/; return reg. test (value) ;}, message: 'The student ID format is incorrect. '}, // The verification student id cannot be repeated. snumber: {// param parameter is the id value of textarea validator: function (value, param) {// put the json data obtained from the background into textarea, and then parse it into an array var snumbers = $. parseJSON ($ (param) [0]. val (); for (var I = 0; I <snumbers. length; I ++) {if (value = snumbers [I]) {// if the student ID is repeated, false return false;} return true ;}

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:

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:

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:

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:

// Set easyui control $ ("# addSnumber "). attr ("class", "easyui-textbox"); // sets the verification attribute $ ("# addSnumber "). attr ("validType", "snumber ['# snumber']"); after setting the easyui control in jQuery above, it won't work. Then Baidu goes down, after dynamically adding the easy control, you need to re-render it as follows: // set the easyui control $ ("# addSnumber "). attr ("class", "easyui-textbox"); // sets the verification attribute $ ("# addSnumber "). attr ("validType", "snumber ['# snumber']"); // parse all pages $. parser. parse ();

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

The following code does not work:

// Set easyui control $ ("# addSnumber "). attr ("class", "easyui-textbox"); // sets the verification attribute $ ("# addSnumber "). attr ("validType", "snumber ['# snumber']"); // parse the specified Element $. 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.

To render a single element, write it as follows:

// Set easyui control $ ("# addSnumber "). attr ("class", "easyui-textbox"); // sets the verification attribute $ ("# addSnumber "). attr ("validType", "snumber ['# snumber']"); // parse the specified Element and find its parent element $. 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:

// The verification student ID cannot be repeated. snumber: {validator: function (value) {var flag = true; $. ajax ({type: "post", async: false, url: "/sims/StudentServlet? Method = AllSNumber ", success: function (data) {// load data in the verification function. After loading the data, judge the input value var snumbers = $. parseJSON (data); for (var I = 0; I <snumbers. length; I ++) {if (value = snumbers [I]) {flag = false; break ;}}}); return flag ;}, message: 'Student ID duplication '},

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:

// Verify the form var validate = $ ("# editStuForm"). form ("validate"); if (! Validate) {$. messager. alert ("message reminder", "Please check your input data! "," Warning "); return;} else {// submit}

The form code is as follows:

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

Put it in data-options:

OK, everything is fine. You can verify both of them !!!
Conclusion: easyui verification duplication and format, multiple Verification

// The student ID format can only be number: {// value is the value of validator: function (value) {var reg =/^ [0-9] * $ /; return reg. test (value) ;}, message: 'The student ID format is incorrect. '}, // The verification student ID cannot be repeated snumber: {validator: function (value) {var flag = true; $. ajax ({type: "post", async: false, url: "/sims/StudentServlet? Method = AllSNumber ", success: function (data) {// load data in the verification function. After loading the data, judge the input value var snumbers = $. parseJSON (data); for (var I = 0; I <snumbers. length; I ++) {if (value = snumbers [I]) {flag = false; break ;}}}); return flag ;}, message: 'Student ID duplication '},

  Student ID:         

The final effect is as follows:

OK !!!
Most of them are summarized by myself multiple times. Many things do not understand the principle yet. I think it should be easyui. min. I hope this article will help you learn more about js problems.