Jquery validate custom validation method introduces date validation

Jquery validate has many validation rules, but more often than not, you need to customize the validation rules for a specific situation.

Let's talk about the custom validation of jquery validate.

Jquery validate has a method that allows the user to customize the validation rules.

Case 1:

//Custom validation
            $.validator.addMethod("isPositive",function(value,element){
                var score = /^[0-9]*$/;
                return this.optional(element) || (score.test(value));
            },"<font color='#E47068'> Please enter greater than 0 The number of </font>");

With addMethod, users can customize their own validation rules

This method has three arguments. The first parameter is the name of the validation rule.

The second parameter is the actual validation body, which is a function. The first value of the function represents the value of the form calling the validation rule. The second element can be used to determine whether it is null or not.

The third parameter is the error message returned.

How do you use it?

In fact, it USES the same validation rules inherent in jquery validate.

 <tr bgcolor="#f7f7f7"  height="43" align="right">
                        <td class="font14_s pdr_12 grey_70"> Total score :</td>
                        <td class="font14_s pl40" align="left"><input type="text" id="fullscore" name="fullscore" style=" margin-left: 10px; margin-right: 2px;" value="<!--{$aExams.fullscore}-->" class="required number isPositive input_233" /></td>
                    </tr>

As shown above, the bold part is the method used, which shares three validation rules, one must, one number, and one custom validation rule.

The effect drawing is as follows:

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201402/201402270958102.png ">

Case 2:

When a form is submitted, it is often necessary to validate the date, such as if the end time must be greater than the start time.

At this point, you can customize a validation method with jquery validate.

Here's how:

$.validator.addMethod("compareDate",function(value,element){
                var assigntime = $("#assigntime").val();
                var deadlinetime = $("#deadlinetime").val();
                var reg = new RegExp('-','g');
                assigntime = assigntime.replace(reg,'/');//Regular replacement
                deadlinetime = deadlinetime.replace(reg,'/');
                assigntime = new Date(parseInt(Date.parse(assigntime),10));
                deadlinetime = new Date(parseInt(Date.parse(deadlinetime),10));
                if(assigntime>deadlinetime){
                    return false;
                }else{
                    return true;
                }
            },"<font color='#E47068'> The end date must be greater than the start date </font>");

The red part of the code above is to process the time string into the standard format of 2013/12/12 08:09:00,

The replace method is used in the process, which is finally combined with the regular expression, which is the reg object in the first line.

And when we're done, how do we compare the time? There are three treatments,

1. Convert standard time to a timestamp and handle it with the date.parse () method.

2. Convert the timestamp to an integer, making sure it is handled by parseInt("",10) in case.

3. Convert the timestamp to a Date object new Date().

After converting to an object, you can compare the size of the time, directly determine, if the end time is less than the start time, error message.

At this point compareDate can be validated like any other jquery validate validation rule.

Case 3: ajax validation

Go to the database to verify the existence of the username, which is often used.

$.validator.addMethod("checkUserExist",function(value,element){
                var user = value;
                $.ajax({
                    type:"POST",
                    async:false, 
                    url:"/default/index/ajax/do/ajaxcheckuser",
                    data:"nick="+user,
                    success:function(response){
                        if(response){
                            res = false;
                        }else{
                            res = true;
                        }
                    }
                });
                return res;
            },"<font color='#E47068'> The username already exists </font>");

Background verification code:

case 'ajaxcheckuser': 
                $nick = trim($this->_getParam('nick'));
                if(isset($nick)){
                    $where['lx_user.nick = ?'] = array('type'=>1,'val'=>$nick);
                    $aUser = $daoUser->getUser($where);
                    if(count($aUser)>=1){
                        echo TRUE;
                    }else{
                        echo FALSE;
                    }
                }else{
                    echo FALSE;
                }
                break;

Returns true if it exists in the database.

< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201402/201402270958103.png ">