Atitit. The dsl nature of Form Verification is compared with easyui ligerui, atititeasyui

Atitit. The dsl nature of Form Verification is compared with easyui ligerui, atititeasyui

Atitit. Comparison between dsl nature of Form Verification and easyui ligerui

 

1. DSL Declaration Verification 1

2. Custom Rule 1

3. Regular Expression verification, which can be extended to 2

4. error message, generic canBeEmpty is good 3

5. Prevent the form to submit when invalid 3

6. If it is null, It is not verified. If it is not null, it is verified. Implementation 5

7. Refer to 6

 

 

1. DSL Declaration Verification

<Input class = "easyui-validatebox" type = "text" name = "email" required = "true" validType = "email"> </input>

We add a class named easyui-validatebox to input markup so the input markup will be applied the validation according the validType attribute.

 

 

Liger

<Input ligeruiid = "txtName" style = "width: 174px; "class =" l-text-field "name =" txtName "id =" txtName "ltype =" text "validate =" {required: true, minlength: 3, maxlength: 10} "type =" text ">

 

Verification rules

Verification rules are defined using the required and validType attributes. The following lists the Built-in validation rules of the plug-in.

1 email: email with regular expression matching.

2 url: Regular Expression matching url.

3 length [0,100]: verification length range.

4 remote ['HTTP: //.../action. do ', 'paramname']: sends an ajax request for verification. If the verification is valid, true is returned.

 

 

Author: old wow's paw Attilax iron, EMAIL: 1466519819@qq.com

Reprinted please indicate Source: http://blog.csdn.net/attilax

 

2. Custom Rules

To customize rules, overload $. fn. validatebox. ults. The verification rule you define must define a verification function and a prompt message indicating that the verification is invalid. For example, define a rule to verify the minimum length:

5 $. extend ($. fn. validatebox. defaults. rules ,{

6 minLength :{

7 validator: function (value, param ){

8 return value. length> = param [0];

9 },

10 message: 'Please enter at least {0} characters .'

11}

12 });

Now you can use the minimum length verification rule to define an input box with at least five characters.

13 <input class = "easyui-validatebox" validType = "minLength [5]">

14 validType = "minLength [5]" here. The setting may be invalid. You can set it to validType = "length [3, 8]". The value is 3 ~ Between 8 characters

Attribute

 

3. Regular Expression verification, which can be extended

 

Expansion 2

$. Extend ($. fn. validatebox. defaults. rules ,{

Idcard: {// verify the ID card

Validator: function (value ){

Return/^ \ d {15} (\ d {2} [A-Za-z0-9])? $/I. test (value );

},

Message: 'incorrect ID card number format'

},

 

4. error message, generic canBeEmpty is good

 

Attribute

Name	Type	Description	Default Value
Required (required)	Boolean (boolean)	The form field must be defined.	False
ValidType)	String (string)	Define the verification type of form fields, such as email and url.	Null
MissingMessage (prompt not filled)	String (string)	Prompt message when the form field is not filled.	This field is required.
InvalidMessage (Invalid Message)	String (string)	A prompt appears when the content of the form field is verified as invalid.	Null

 

 

 

Liger: deft is this field is not be empty, jsig haon normall ...... generic...

5. Prevent the form to submit when invalid

When users click the submit button of form, we shocould prevent the form to submit if the form is invalid.

15 $ ('# ff'). form ({

16 url: 'form3 _ proc. php ',

17 onSubmit: function (){

18 return $ (this). form ('validate ');

19 },

20 success: function (data ){

21 $. messager. alert ('info', data, 'info ');

22}

23 });

If the form is invalid, a tooltip message will show.

-------- Liger

 

$ (Function ()

{

$. Metadata. setType ("attr", "validate ");

Var v = $ ("form"). validate ({

Debug: true,

ErrorPlacement: function (lable, element)

{

If (element. hasClass ("l-textarea "))

{

Element. ligerTip ({content: lable.html (), target: element [0]});

}

Else if (element. hasClass ("l-text-field "))

{

Element. parent (). ligerTip ({content: lable.html (), target: element [0]});

}

Else

{

Lable. appendTo (element. parents ("td: first"). next ("td "));

}

},

Success: function (lable)

{

Lable. ligerHideTip ();

Lable. remove ();

},

SubmitHandler: function ()

{

$ ("Form. l-text,. l-textarea"). ligerHideTip ();

Alert ("Submitted! ")

}

});

$ ("Form"). ligerForm ();

$ (". L-button-test"). click (function ()

{

Alert (v. element ($ ("# txtName ")));

});

});

 

 

6. If it is null, verification is not performed. If it is not null, verification is performed.

It is not suitable now, but you need to expand the Rules yourself.
However, the e-mail, url, and telephone requests are usually empty.

Reload the verification rules:

Js Code

24 $. extend ($. fn. validatebox. defaults. rules ,{

25 email :{

26 validator: function (value, param ){

27 if (value ){

28 return/^ ([\ w] + )(. [\ w] +) * @ ([\ w-] + \.) {1, 5} ([A-Za-z]) {2, 4} $ /. test (value );

29} else {

30 return true;

31}

32 },

33 message: 'Please enter a valid email address .'

34 },

35 url :{

36 validator: function (value, param ){

37 if (value ){

38 return/(https ?) | (Ftp): \/([\-\ w] + \.) + \ w {2, 3} (\/[% \-\ w] + (\. \ w {2 ,})?) * ([\ W \-\.\? \/+ @&#;'~ = %!] *) (\. \ W {2 ,})?) *\/?) /I. test (value );

39} else {

40 return true;

41}

42 },

43 message: 'Please enter a valid URL .'

44}

45 });

 

 

 

7. Reference

Extended form verification of easyui-Crazy talent-blog Park .htm

Easyui formal expression verification extended (when the package is used for a while, the verification formula is _ east_avajeast_xinlang Boke .htm

JQuery ligerui and JQuery easyui which load speed is faster?

Ligerui is not recommended.
This kit is a defective product. The author does not fix many of the bugs and needs to find out which ones to change. If dom programming is not perfect, we do not recommend this one. I feel that the author has no intention of promoting or perfecting this product. It is undeniable that the product is very technical, but this attitude is daunting.
Easyui. At least a large number of users are used, so you can check the problem. Of course, if you think you can cope with most js Programming Problems on the internet, ligerui is also indispensable.

Which of the following is comprehensive between jquery easyui and jquery ligerui? Guidance

Easyui is relatively simple to learn, and the official documentation is very clear, and its functions are indeed very powerful. We recommend that you use easyui.