jQueryプラグインの詳細説明 formValidatorカスタム関数拡張関数 example

jQueryプラグインの詳細説明 formValidatorカスタム関数拡張関数 example_jquery

WBOY

リリース： 2016-05-16 15:29:50

オリジナル

1483 人が閲覧しました

この記事の例では、jQuery プラグインの formValidator カスタム関数の機能を拡張する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

jQuery formValidator フォーム検証プラグインとは何ですか? 興味のある読者は、このサイトの「jQuery formValidator フォーム検証プラグイン」およびその他の関連ドキュメントを参照してください。

ここでは一部のテキストを省略しています。

実際のプロジェクトにおけるフォームアプリケーションは多様であり、それに伴う検証も多様ですが、Jquery formValidator はカスタム関数インターフェイスを提供しており、これが個人的に最大の強みであると考えています。早速、例に移りましょう。

例 1: 固定電話または携帯電話、少なくとも 1 つを選択します。どちらかを選択する必要はありません。

分析: これは組み合わせ検証であり、ユーザーが選択したさまざまなフレームに応じて異なる検証条件が必要です。

知識ポイント: Jquery formvalidator はカスタム関数インターフェイスを functionValidator({ fun: funname });

として提供します。

固定電話

$("#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}-)&#63;(0\d{2,3})-)&#63;(\d{7,8})(-(\d{3,}))&#63;$/) != -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}-)&#63;(0\d{2,3})-)&#63;(\d{7,8})(-(\d{3,}))&#63;$/) != -1) { return true } else {
     return "座机电话格式错误";
    }
   }
  }
};

ログイン後にコピー

例 2: 検証をキャンセルするためのセカンダリリージョンドロップダウンがない場合のリージョンカスケードドロップダウン。

県、市、地域のカスケード

$("#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&#63;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); //恢复校验
  }
 });
}

ログイン後にコピー

一般的に使用される検証:

整数:

コードをコピーコードは次のとおりです:

$("#zs").formValidator({onshow:"Please整数を入力してください" ,oncorrect:"ご協力ありがとうございます。整数は正しいです"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"整数の形式が正しくありません"});

正の整数:

コードをコピーコードは次のとおりです:

$("#zzs").formValidator({onshow:"正の整数を入力してください",oncorrect:"ご協力ありがとうございます。正の整数は正しいです"}).regexValidator({regexp:"intege1",datatype: "enum ",onerror:"正の整数の形式が正しくありません"});

負の整数:

コードをコピーコードは次のとおりです:

$("#fzs").formValidator({onshow:"負の整数を入力してください",oncorrect:"ご協力ありがとうございます。負の整数は正しいです"}).regexValidator({regexp:"intege2",datatype: "enum ",onerror:"負の整数の形式が正しくありません"});

正の数:

コードをコピーコードは次のとおりです:

$("#zs1").formValidator({onshow:"正の数値を入力してください",oncorrect:"ご協力ありがとうございます。正の数値は正しいです"}).regexValidator({regexp:"num1",datatype: "enum ",onerror:"正の数値の形式が正しくありません"});

番号:

コードをコピーコードは次のとおりです:

$("#sz").formValidator({onshow:"番号を入力してください",oncorrect:"ご協力ありがとうございます。番号は正しいです"}).regexValidator({regexp:"num",datatype:"enum ", onerror:"数値の形式が正しくありません"});

負の数:

コードをコピーコードは次のとおりです:

$("#fs").formValidator({onshow:"負の数値を入力してください",oncorrect:"ご協力ありがとうございます。負の数値は正しいです"}).regexValidator({regexp:"num2",datatype: "enum", onerror:"負の数値の形式が正しくありません"});

浮動小数点数:

$("#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:"非正浮点数格式不正确"});

ログイン後にコピー

携帯電話:

コードをコピーコードは次のとおりです:

$("#sj").formValidator({onshow:"携帯電話番号を入力してください",onfocus:"13 または 15 で始まる必要があります",oncorrect:"ご協力ありがとうございます。携帯電話番号は正しいです" }) .regexValidator({regexp:"mobile",datatype:"enum",onerror:"携帯電話番号の形式が正しくありません"});

固定電話:

コードをコピーコードは次のとおりです:

$("#dh").formValidator({onshow:"国内の電話番号を入力してください",onfocus:"例: 0577-88888888 または市外局番 88888888 を省略してください",oncorrect:"国内のお客様、ご協力ありがとうございます電話番号は正しいです"}) .regexValidator({regexp:"tel",datatype:"enum",onerror:"国内電話の形式が間違っています"});

メールアドレス:

コードをコピーコードは次のとおりです:

$("#email").formValidator({onshow:"メールアドレスを入力してください",onfocus:"入力するメール形式に注意してください。例: wzmaodong@126.com",oncorrect:"ご連絡いただきありがとうございますご協力、あなた メールアドレスは正しいです"}).regexValidator({regexp:"email",datatype:"enum",onerror:"メール形式が正しくありません"});

郵便番号:

コードをコピーコードは次のとおりです:

$("#yb").formValidator({onshow:"郵便番号を入力してください",onfocus:"6桁で構成されています",oncorrect:"ご協力ありがとうございます、郵便番号は正しいです"}).regexValidator ({regexp :"zipcode",datatype:"enum",onerror:"郵便番号の形式が正しくありません"});

QQ：

コードをコピーコードは次のとおりです:

$("#qq").formValidator({onshow:"QQ 番号を入力してください",oncorrect:"ご協力ありがとうございます。QQ 番号は正しいです"}).regexValidator({regexp:"qq",datatype: "enum ",onerror:"QQ 番号の形式が正しくありません"});

IDカード:

コードをコピーコードは次のとおりです:

$("#sfz").formValidator({onshow:"ID カードを入力してください",oncorrect:"ご協力ありがとうございます。ID カードは正しいです"}).regexValidator({regexp:"idcard",datatype: "enum ",onerror:"ID カードの形式が正しくありません"});

手紙:

コードをコピーコードは次のとおりです:

$("#zm").formValidator({onshow:"文字を入力してください",oncorrect:"ご協力ありがとうございます。文字は正しいです"}).regexValidator({regexp:"letter",datatype:"enum" 、onerror:"文字の形式が正しくありません"});

大文字:

コードをコピーコードは次のとおりです:

$("#dxzm").formValidator({onshow:"大文字を入力してください",oncorrect:"ご協力ありがとうございます。大文字は正しいです"}).regexValidator({regexp:"letter_u",datatype:" enum ",onerror:"大文字の形式が正しくありません"});

小文字:

コードをコピーコードは次のとおりです:

$("#xxzm").formValidator({onshow:"小文字を入力してください",oncorrect:"ご協力ありがとうございます。小文字は正しいです"}).regexValidator({regexp:"letter_l",datatype:" enum ",onerror:"小文字の形式が正しくありません"});

この記事が jQuery プログラミングのすべての人に役立つことを願っています。