Validatebox control and regular expression of Jquery easyui

Validatebox is the verification control of EasyUI. It supports many verifications, such as whether it is an email or a url. It ensures the integrity and correctness of the input data before processing. Verification can be implemented at the data layer and business rule layer, but front-end protection should be implemented at the presentation layer. Therefore, we usually provide users with a friendly and interactive verification experience on the UI Layer, avoiding unnecessary round-trip verification between networks in applications. In the early stage of ASP. NET, we had access to six verification controls. Based on these six verification controls, almost all the verification controls were implemented. So how does Validatebox implement verification?

When you carefully observe the jquery. validatebox. js file, you will find that the regular expression is used for verification. For example, you can verify the length limit. This is written in jquery. validatebox. js:

length:{validator:function(_2d,_2e){var len=$.trim(_2d).length;return len>=_2e[0]&&len<=_2e[1];},message:"Please enter a value between {0} and {1}."}

I don't need to talk about the interface effect.

The Validatebox control provides limited verification capabilities. What if we want more validation expressions? Can I rewrite the jquery. validatebox. js file to provide more verification results for this control according to the format in the jquery. validatebox. js file.

After some experiments and searches, there is a way to provide more verification information for the Validatebox control. The specific operations are as follows.

Extension of jquery. validatebox. js to create a new js file named validatebox. js. The content in this file is as follows:

// Extended easyui Form Verification $. extend ($. fn. validatebox. defaults. rules, {// verify the Chinese character CHS: {validator: function (value) {return/^ [\ u0391-\ uFFE5] + $ /. test (value) ;}, message: 'The input Chinese characters only. '}, // Mobile phone number verification Mobile: {// value is the value of validator: function (value) in the text box) {var reg =/^ 1 [3 | 4 | 5 | 8 | 9] \ d {9} $/; return reg. test (value) ;}, message: 'Please enter your mobile phone number correct. '}, // domestic zip code verification ZipCode: {validator: function (value) {var reg =/^ [0-9] \ d {5} $/; return reg. test (value) ;}, message: 'The zip code must be 6 digits and 0 began. '}, // Number: {validator: function (value) {var reg =/^ [0-9] * $/; return reg. test (value) ;}, message: 'Please input number. '},})

HTML page:

 Basic ValidateBox-jQuery EasyUI Demo
 
 
 <Script type = "text/javascript" src = ".. /.. /jquery. min. js "> </script> <script type =" text/javascript "src = ".. /.. /jquery. easyui. min. js "> </script> <script src =" validatebox. js "type =" text/javascript "> </script>
 Common verification formats
 
 

  
  
 
   
 
    
User Name:
 
    
 
   
 
   
 
    
Email:
 
    
 
   
 
   
 
    
Birthday:
 
    
 
   
 
   
 
    
URL:
 
    
 
   
 
   
 
    
Mobile:
 
    
 
   
 
   
 
    
Length:
 
    
 
   
 
   
 
    
Chinese:
 
    
 
   
 
   
 
    
ZipCode:
 
    
 
   
 
   
 
    
Number:
 
    
 
   
 
  
 
 

The implementation result is as follows:

Summary

According to the verification expression, extend the default verification type of Validatebox, and then modify the attribute -- validType of Validatebox to implement any verification you want.