Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Detailed explanation of jQuery plug-in formValidator custom function extension function example_jquery

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

WBOY
Release： 2016-05-16 15:29:50
Original
1483 people have browsed it

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 "座机电话格式错误";
    }
   }
  }
};
Copy after login

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); //恢复校验
  }
 });
}
Copy after login

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:"非正浮点数格式不正确"});
Copy after login

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.

Related labels：
function extension customize
source：php.cn
Previous article：javascript Slip.js implements full-screen sliding mobile webpage_javascript skills Next article：jQuery realizes the method of double-clicking a Table cell to turn it into a text box and updating it to the database after inputting the content_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Shopware 6 Plugin: How to remove boolean configuration and migrate it to multi-select configuration I have a Shopware6 plugin that is currently configured with a boolean reviewSkipModeration...
From 2024-04-03 23:09:28
0
1
410
How to check if created_in column is inside trigger? Columns and trigger structures in the user table CREATETABLE`users`(`created_in`datetimeNO...
From 2024-04-03 17:50:59
0
1
305
WooCommerce Checkout - Validate user roles and cart contents I'm having a challenge with WooCommerce's checkout process. I use the "B2BforWooComme...
From 2024-04-03 11:58:52
0
1
475
Why doesn't my Jquery slider display correctly? I'm trying to implement the SlickSlider library in my WordPress custom theme to display an...
From 2024-04-03 10:43:26
0
1
397
Update fields in AJAX POST request I'm trying to dynamically update a custom field in an AJAXPOST request using jQuery or Jav...
From 2024-04-02 11:45:41
0
1
360
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template