"Develop" form Validate forms Validation Extension app

Directory:

★, text input frame (easyui-textbox)

★, Number Box (easyui-numberbox)

★, Time (easyui-datebox)

★, text field (easyui-textbox easyui-validatebox)

★, drop- down box (easyui-combobox)

Special Note:

The validation mechanism is turned off and enabled . You can use data-options= "novalidate:true" to turn off validation of the element first, and then turn on validation when the form is submitted. This avoids the situation where the user displays a red hint when they first see the form .

The sample code is as follows:

1. HTML declaration:

<input class= "Easyui-combobox" name= "Operator" Required= "true" missingmessage= "Please select an item" data-options= "novalidate:true, Valuefield:

Or <th> <label> Number of bytes:</label> </th> <td> <input Type= "Text" Name= "Bytesnum" Class= "Easyui-numberbox" novalidate= "true" min= "0" max= "99000000" precision= "0" required= "true" missingmessage= "please fill in the number of bytes to ensure that it is a valid positive integer"/> </td>

2, JS Verification: (Gray section can be removed)

Assign Task Save $btnPreAssignSave _generaltasks.click (function () { $ ('. Validatebox-text '). Validatebox ('enablevalidation'). Validatebox ('validate'); var validate = $maintainForm. Form (' enablevalidation '). Form (' Validate '); if (!validate) { return false; }

Note that in the validation phase, you first "Turn on Validation" (enablevalidation) and then "Perform validation" (validate).

Reference Example:
Http://www.jeasyui.net/plugins/167.html
Http://www.jeasyui.net/demo/419.html

★, text input frame (easyui-textbox)

<input class= "easyui-textbox" type= "text" Name= "BookName" Validtype= "length[0,"/>

It is generally only possible to limit the length of the input characters

★ , the Number box (easyui-# Box)

Includes integers, decimals, and the limits of the size category of numbers.

<tr> <th> <label> start page: </label> </th> <td> <input class= easyui-numberbox "name=" Beginpagenum " min =" 0 " Max = "10000000" precision = "0" Required = "true" missingmessage = "Please fill in the starting page number (0--10000000)"/> </td> <th> <label > End page: </label> </th> <td> <input class= " Easyui-numberbox "Name=" Endpagenum " min =" 0 " max =" 10000000 " precision =" 0 " Required =" true "missingmessage=" please fill in the end page number (0--10000000) "/> </td> </tr>

You can limit the size range of a number, thePrecision attribute is used to limit the number of decimal places, and required ensures that it is required.

Custom validation: In the actual business, there may be a rule between the starting and ending page numbers " make sure the end page number is greater than (>) Start Page number ", just call the Biggnerpagenumthantarget custom extension, the ID of the form being passed in and the name of the comparison element, and the appropriate validation message for the 3rd parameter:

<tr> <th> <label> Start Page:</label> </th> <td> <input class= "Easyui-numberbox" name= "Beginpagenum" Required= "true" missingmessage= "please fill in the starting page number to ensure that it is a valid positive integer" min= "0" max= "99000000" precision= "0"/> </td> <th> <label> End Page:</label> </th> <td> <input class= "Easyui-numberbox" name= "Endpagenum" Required= "true" missingmessage= "please fill in the end page number to ensure that it is a valid positive integer" min= "0" max= "99000000" precision= "0" Validtype= "biggnerpagenumthantarget['preassignform', 'beginpagenum', ' Please make sure the end page number is greater than the starting page number '] "/> </td> </tr>

The above calls the Biggnerpagenumthantarget custom extension for end page number, and when the user enters the end page number, the user is prompted to "Make sure the end page number is greater than the starting page number."

★, Time (easyui-datebox)

Verification Highlights :

1, add the validation extension Smallerdatethantarget in the script of the page and

B

Iggnerdatethantarget

2. Add the Validtype property to the time control

3, array type parameters, the first parameter is the form ID, the second parameter is used to compare the name of the target control, it is important to note.

(As long as it is possible to locate an element through the form ID and its element name, you do not define the ID for a single element, keeping the form concise, that is, explicit rendering must have a definite meaning.) ）

Validtype= "smallerdatethantarget[' preassignform ', ' EndDate ']"

Detailed description :

It is mainly the verification of the time range.

You can use extension functions to limit the range between start time and end time.

Often the start time is small, and is less than the end time , so the start time call Smallerdatethantarget method;

Meanwhile, the end time is bound to be larger, and is greater than the start time , so the end time is called

B

Iggnerdatethantarget method.

<tr> <th> <label> start time: </label> </th> <td> <input class= "Easyui-datebox" name= "begindate" editable= "false" Required= "true" missingmessage= "please fill in the time"/> </td> <th> <label> end time: </ Label> </th> <td> <input class= "Easyui-datebox" name= "EndDate" Editable= "false" required= "true" missingmessage= "please fill in time" validtype= " biggnerdatethantarget [ ' preassignform ', ' begindate ', ' make sure the end time is greater than the start Time '] "/> </td> </tr>

$.extend ($.fn.validatebox.defaults.rules, { Biggnerdatethantarget : { validator:function (currentelementvalue, param) { if (!$.isarray ( param) { Window.alert ("The argument passed when invoking the validator must be in array format: validtype=\" dateboxcheck[' preassignform ', ' begindate ', ' Hint information ']\ "" ); return false; } var scopeelementid = param[0]; var targetelementname = param[1]; var targetelement = $ ("#" + Scopeelementid). Find (": input[name= '" + Targetelementname + "']"). Val (); Return currentelementvalue >= targetelement; }, message: ' {2} ' } });

$.extend ($.fn.validatebox.defaults.rules, { Smallerdatethantarget: { Validator:function (Currentelementvalue, param) { if (!$.isarray (param)) { Window.alert ("The argument passed when invoking the validator must be in array format: validtype=\" dateboxcheck[' preassignform ', ' begindate ', ' Hint Information ']\ "); return false; } var scopeelementid = param[0]; var targetelementname = param[1]; var targetelement = $ ("#" + Scopeelementid). Find (": input[name= '" + Targetelementname + "']"). Val (); return Currentelementvalue <= targetelement; }, Message: ' {2} ' } });

★, Text field (easyui-textbox easyui-validatebox)

Verification Highlights :

1, annotated validtype= "length[0," can be.

Detailed description :

The text field does not need to use <textarea/> to express, at the Easyui level its definition is still a textbox, just multiline:true.

Specify two classes at a time:easyui-textbox and easyui-validatebox

<tr> <th> <label> remarks:</label> </th> <TD colspan= "3" > <input class= "easyui-textbox easyui-validatebox" Validtype= "length[0," data-options= "multiline:true" Style= "width:520px; height:60px; "Name=" Notes "/> </td> </tr>

★, drop-down frame (easyui-combobox)

Verification Highlights :

1, add the validation extension selectionrequired in the script of the page.

2. Add the Validtype property to the drop-down box element, and the array parameter is its own ID and validation message.

Validtype= "selectionrequired[' ddloperatorpreassign ', ' Please select an item ']"

Detailed description :

The drop-down box sometimes always includes a default item, sometimes not.

It also supports mandatory validation, and often requires the first item to be selected by default when the data is loaded successfully.

For example, when initializing, the data can be easily obtained, and it is convenient to judge:

<tr> <th> <label> Entry Clerk:</label> </th> <TD colspan= "3" > <input class= "Easyui-combobox" name= "Operator" id= "Ddloperatorpreassign" Editable= "false" Validtype= "selectionrequired[' ddloperatorpreassign ', ' Please select an item ']" Data-options= "Novalidate:true, Valuefield: ' Name ', TextField: ' FullName ', URL: '/pmis/pmis_enteringtasks_assignment/getuserincurrentdept ', Onloadsuccess:function (data) { if (data) { $ (This). ComboBox (' SetValue ', data[0]. Name); } } "> </td> </tr>

$.extend ($.fn.validatebox.defaults.rules, { Drop-down box validation Selectionrequired: { Validator:function (Currentelementtext, param) { For the drop-down box, the validation component can only get its text value by default, and it needs to re-extract its value. if (!$.isarray (param)) { Window.alert ("The argument passed when invoking the validator must be in array format: validtype=\" selectionrequired[' ddloperatorpreassign ', ' hint information ']\ ' "); return false; } var targetelement = $ ("#" + param[0]); var targetelementvalue = Targetelement.combobox (' GetValue '); Console.group ("Start Verification dropdown box"); Console.info ("The validation is to ensure that the drop-down box option value is not a null object, not \" 0\ ", nor \" \ "); Console.info ("drop-down box Element id =" + param[0]); Console.info ("currently selected value =" + Targetelementvalue); Console.info ("The type of the currently selected value is" + typeof Targetelementvalue); Console.info ("currently selected text =" + Currentelementtext); Console.info ("The type of the currently selected text is" + typeof Currentelementtext); if (targetelementvalue! = NULL && targetelementvalue! = "0" && targetelementvalue! = "") { Console.info ("Verification success"); Console.groupend (); return true; } Console.warn ("Verification failed"); Console.groupend (); }, Message: ' {1} ' } });

Note for the drop-down box, do not use the clear () method of the form, which causes the value of the drop-down box to be cost blank, and the form's reset () method should be used .

"Develop" form Validate forms Validation Extension app