Let's briefly introduce the js code. For more information, see the source code of the above example:
$ (Document). ready (function (){
JQuery. validator. addMethod ("phonecheck", function (value, element) {// add a phonecheck method to customize check rules
String = value. match (/0 (\ d {2})-(\ d {7})/ig );
If (string! = Null ){
Return true;
} Else {
Return false;
}
}, "Telphone number like 021-1234567 ");
JQuery. validator. addMethod ("phonesame", function (value, element) {// use the jquery ajax method to verify whether the phone already exists
Var flag = 1;
$. Ajax ({
Type: "POST ",
Url: 'Tel. Php ',
Async: false, // synchronous method. If asynchronous, the flag is always 1
Data: {'tel': value },
Success: function (msg ){
If (msg = 'yes '){
Flag = 0;
}
}
});
If (flag = 0 ){
Return false;
} Else {
Return true;
}
}, "Sorry number have been exist ");
$ ("# Myform"). validate ({
ErrorPlacement: function (error, element ){
Error. insertAfter (element );
},
Rules :{
Username :{
Required: true,
Remote: {// methods for remote verification
Url: "tel. php ",
Type: "post ",
DataType: "html ",
Data :{
Username: function () {return $ ("# username"). val ();}
},
DataFilter: function (data, type ){
If (data = "yes ")
Return true;
Else
Return false;
}
}
},
Telphone :{
Required: true,
Rangelength: [11, 11],
Phonecheck: true,
Phonesame: true
}
},
Messages :{
Telphone :{
Required: "Please enter your phone ",
Rangelength: "phone must be 11 numbers"
},
Username :{
Required: "Please enter your username ",
Remote: "the username have been exist"
}
},
Debug: true
})
});
</Script>
We recommend that you use jquery validate, which is easy to use.