Detailed explanation of jQuery plug-in formValidator custom function extension function example_jquery

The example in this article describes how to extend the functions of the jQuery plug-in formValidator custom function. Share it with everyone for your reference, the details are as follows:

What is the jQuery formValidator form validation plug-in? Interested readers can refer to "jQuery formValidator form validation plug-in" and other related documents on this site

Some text is omitted here.

The form applications in actual projects are diverse, and the verification that comes with it is also varied, but Jquery formValidator provides us with a custom function interface, which I personally think is its main strength. Without further ado, let’s go straight to examples.

Example 1: Landline or mobile phone, choose at least one, you don’t have to choose either.

Analysis: This is a combination verification, which requires different verification conditions according to the different frames selected by the user.

Knowledge point: Jquery formvalidator provides a custom function interface as functionValidator({ fun: funname });

Landline mobile phone

$("#txtMobileTel,#txtContactTel").formValidator({ tipid: "txtMobileTelTip", onshow: "请填写任一种联系号码", onfocus: "请输入移动电话或座机电话", oncorrect: "输入正确！" }).functionValidator({ fun: allEmpty });
function allEmpty(val, elem) {
 if ($("#txtMobileTel").val() == "" && $("#txtContactTel").val() == "") {
  return '请输入移动电话或座机电话';
 }
 else {
  if ($("#txtMobileTel").val() != "" && $("#txtContactTel").val() != "") {
   if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/) != -1) {
    if (($("#txtContactTel").val()).search(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/) != -1) { return true } else {
     return "座机电话格式错误";
    }
   } else {
    return "移动电话格式错误";
   }
  } else {
   if ($("#txtMobileTel").val() != "") {
    if (($("#txtMobileTel").val()).search(/^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/) != -1) { return true } else {
     return "移动电话格式错误";
    }
   }
   if ($("#txtContactTel").val() != "") {
    if (($("#txtContactTel").val()).search(/^(([0\+]\d{2,3}-)?(0\d{2,3})-)?(\d{7,8})(-(\d{3,}))?$/) != -1) { return true } else {
     return "座机电话格式错误";
    }
   }
  }
};

Example 2: Region cascading drop-down, when there is no secondary region drop-down to cancel verification.

Province, city and region cascade

$("#ddlOne").formValidator({ onshow: "请选择省市", onfocus: "省市必须选择", oncorrect: "输入正确" }).inputValidator({ min: 1, onerror: "请选择有效的地区" }).functionValidator({ fun: city });
 $("#ddlTwo").formValidator({ onshow: "请选择城市", onfocus: "城市必须选择", oncorrect: "输入正确" }).inputValidator({ min: 1, onerror: "请选择有效的地区" });
function city(val, elem) {
 var a = "";
 $.getJSON("../Customer/Area.ashx?parentid=" + $("#ddlOne option:selected").val(), null, function(json) { 
  if (json[0].areacode == "0") {
   $("#ddlTwo").attr("disabled", true).unFormValidator(true); //解除校验
  }
  else {
   $("#ddlTwo").attr("disabled", false).unFormValidator(false); //恢复校验
  }
 });
}

Commonly used verification:

Integer:

Copy code The code is as follows:

$("#zs").formValidator({onshow:"Please enter an integer" ,oncorrect:"Thank you for your cooperation, your integer is correct"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"The integer format is incorrect"});

Positive integer:

Copy code The code is as follows:

$("#zzs").formValidator({onshow:"Please enter a positive integer",oncorrect:"Thank you for your cooperation, your positive integer is correct"}).regexValidator({regexp:"intege1",datatype:"enum ",onerror:"Positive integer format is incorrect"});

Negative integers:

Copy code The code is as follows:

$("#fzs").formValidator({onshow:"Please enter a negative integer",oncorrect:"Thank you for your cooperation, your negative integer is correct"}).regexValidator({regexp:"intege2",datatype:"enum ",onerror:"Negative integer format is incorrect"});

Positive numbers:

Copy code The code is as follows:

$("#zs1").formValidator({onshow:"Please enter a positive number",oncorrect:"Thank you for your cooperation, your positive number is correct"}).regexValidator({regexp:"num1",datatype:"enum ",onerror:"Positive number format is incorrect"});

Number:

Copy code The code is as follows:

$("#sz").formValidator({onshow:"Please enter a number",oncorrect:"Thank you for your cooperation, your number is correct"}).regexValidator({regexp:"num",datatype:"enum", onerror:"The number format is incorrect"});

Negative numbers:

Copy code The code is as follows:

$("#fs").formValidator({onshow:"Please enter a negative number",oncorrect:"Thank you for your cooperation, your negative number is correct"}).regexValidator({regexp:"num2",datatype:"enum", onerror:"Negative number format is incorrect"});

Floating point number:

$("#zfds").formValidator({onshow:"请输入正浮点数",oncorrect:"谢谢你的合作，你的正浮点数正确"}).regexValidator({regexp:"decmal1",datatype:"enum",onerror:"正浮点数格式不正确"});
$("#ffds").formValidator({onshow:"请输入负浮点数",oncorrect:"谢谢你的合作，你的负浮点数正确"}).regexValidator({regexp:"decmal2",datatype:"enum",onerror:"负浮点数格式不正确"});
$("#fffds").formValidator({onshow:"请输入非负浮点数",oncorrect:"谢谢你的合作，你的非负浮点数正确"}).regexValidator({regexp:"decmal4",datatype:"enum",onerror:"非负浮点数格式不正确"});
$("#fzfds").formValidator({onshow:"请输入非正浮点数",oncorrect:"谢谢你的合作，你的非正浮点数正确"}).regexValidator({regexp:"decmal5",datatype:"enum",onerror:"非正浮点数格式不正确"});

Mobile phone:

Copy code The code is as follows:

$("#sj").formValidator({onshow:"Please enter your mobile phone number",onfocus:"It must start with 13 or 15",oncorrect:"Thank you for your cooperation, your mobile phone number is correct"}) .regexValidator({regexp:"mobile",datatype:"enum",onerror:"Mobile phone number format is incorrect"});

Landline:

Copy code The code is as follows:

$("#dh").formValidator({onshow:"Please enter the domestic phone number",onfocus:"For example: 0577-88888888 or omit the area code 88888888",oncorrect:"Thank you for your cooperation, your domestic phone number is correct"}) .regexValidator({regexp:"tel",datatype:"enum",onerror:"Domestic telephone format is incorrect"});

Email:

Copy code The code is as follows:

$("#email").formValidator({onshow:"Please enter your email",onfocus:"Please pay attention to the email format you enter, for example: wzmaodong@126.com",oncorrect:"Thank you for your cooperation, you The email is correct"}).regexValidator({regexp:"email",datatype:"enum",onerror:"email format is incorrect"});

Postcode:

Copy code The code is as follows:

$("#yb").formValidator({onshow:"Please enter the zip code",onfocus:"It consists of 6 digits",oncorrect:"Thank you for your cooperation, your zip code is correct"}).regexValidator({regexp :"zipcode",datatype:"enum",onerror:"The zip code format is incorrect"});

QQ：

Copy code The code is as follows:

$("#qq").formValidator({onshow:"Please enter your QQ number",oncorrect:"Thank you for your cooperation, your QQ number is correct"}).regexValidator({regexp:"qq",datatype:"enum ",onerror:"QQ number format is incorrect"});

ID card:

Copy code The code is as follows:

$("#sfz").formValidator({onshow:"Please enter your ID card",oncorrect:"Thank you for your cooperation, your ID card is correct"}).regexValidator({regexp:"idcard",datatype:"enum ",onerror:"The ID card format is incorrect"});

Letter:

Copy code The code is as follows:

$("#zm").formValidator({onshow:"Please enter letters",oncorrect:"Thank you for your cooperation, your letters are correct"}).regexValidator({regexp:"letter",datatype:"enum", onerror:"The letter format is incorrect"});

Capital letters:

Copy code The code is as follows:

$("#dxzm").formValidator({onshow:"Please enter capital letters",oncorrect:"Thank you for your cooperation, your capital letters are correct"}).regexValidator({regexp:"letter_u",datatype:"enum ",onerror:"The format of capital letters is incorrect"});

Lower case letters:

Copy code The code is as follows:

$("#xxzm").formValidator({onshow:"Please enter lowercase letters",oncorrect:"Thank you for your cooperation, your lowercase letters are correct"}).regexValidator({regexp:"letter_l",datatype:"enum ",onerror:"The format of lowercase letters is incorrect"});

I hope this article will be helpful to everyone in jQuery programming.