Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang jQuery plug-in formValidator fungsi pelanjutan fungsi tersuai example_jquery

Penjelasan terperinci tentang jQuery plug-in formValidator fungsi pelanjutan fungsi tersuai example_jquery

WBOY
Lepaskan: 2016-05-16 15:29:50
asal
1482 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melanjutkan fungsi fungsi tersuai formValidator plug-in jQuery. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Apakah pemalam pengesahan borang jQueryValidator Pembaca yang berminat boleh merujuk kepada "pemalam pengesahan borang jQueryValidator" dan dokumen lain yang berkaitan di tapak ini

Sesetengah teks ditinggalkan di sini.

Aplikasi borang dalam projek sebenar adalah pelbagai, dan pengesahan yang disertakan bersamanya juga berbeza-beza, tetapi Jquery formValidator memberikan kami antara muka fungsi tersuai, yang saya fikir secara peribadi adalah kekuatan utamanya. Tanpa berlengah lagi, mari terus ke contoh.

Contoh 1: Talian tetap atau telefon bimbit, pilih sekurang-kurangnya satu, anda tidak perlu memilih sama ada.

Analisis: Ini ialah pengesahan gabungan, yang memerlukan syarat pengesahan berbeza mengikut bingkai berbeza yang dipilih oleh pengguna.

Titik pengetahuan: Jquery formvalidator menyediakan antara muka fungsi tersuai sebagai functionValidator({ fun: funname });

Telefon mudah alih talian tetap

$("#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 "座机电话格式错误";
    }
   }
  }
};

Salin selepas log masuk

Contoh 2: lungsur turun bertingkat rantau, apabila tiada lungsur rantau kedua untuk membatalkan pengesahan.

Lata wilayah, bandar dan wilayah

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

Salin selepas log masuk

Pengesahan yang biasa digunakan:

Integer:

Salin kod Kod adalah seperti berikut:
$("#zs").formValidator({onshow:"Sila masukkan integer" ,oncorrect:"Terima kasih atas kerjasama anda, integer anda betul"}).regexValidator({regexp:"intege",datatype:"enum",onerror:"Format integer tidak betul"});

Integer positif:

Salin kod Kod adalah seperti berikut:

$("#zzs").formValidator({onshow:"Sila masukkan integer positif", salah:"Terima kasih atas kerjasama anda, integer positif anda betul"}).regexValidator({regexp:"intege1",datatype: "enum ",onerror:"Format integer positif tidak betul"});

Integer negatif:

Salin kod Kod adalah seperti berikut:

$("#fzs").formValidator({onshow:"Sila masukkan integer negatif", salah:"Terima kasih atas kerjasama anda, integer negatif anda betul"}).regexValidator({regexp:"intege2",datatype: "enum ",onerror:"Format integer negatif tidak betul"});

Nombor positif:

Salin kod Kod adalah seperti berikut:

$("#zs1").formValidator({onshow:"Sila masukkan nombor positif", salah:"Terima kasih atas kerjasama anda, nombor positif anda adalah betul"}).regexValidator({regexp:"num1",datatype: "enum ",onerror:"Format nombor positif tidak betul"});

Nombor:

Salin kod Kod adalah seperti berikut:

$("#sz").formValidator({onshow:"Sila masukkan nombor",salah:"Terima kasih atas kerjasama anda, nombor anda betul"}).regexValidator({regexp:"num",datatype:"enum ", onerror:"Format nombor tidak betul"});

Nombor negatif:

Salin kod Kod adalah seperti berikut:

$("#fs").formValidator({onshow:"Sila masukkan nombor negatif", salah:"Terima kasih atas kerjasama anda, nombor negatif anda adalah betul"}).regexValidator({regexp:"num2",datatype: "enum", onerror:"Format nombor negatif tidak betul"});

Nombor titik terapung:

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

Salin selepas log masuk

Telefon mudah alih:

Salin kod Kod adalah seperti berikut:

$("#sj") }) .regexValidator({regexp:"mobile",datatype:"enum",onerror:"Format nombor telefon mudah alih tidak betul"});

Talian Tetap:

Salin kod Kod adalah seperti berikut:

$("#dh") nombor telefon betul"}) .regexValidator({regexp:"tel",datatype:"enum",onerror:"Format telefon domestik salah"});

E-mel:

Salin kod Kod adalah seperti berikut:

$("#email").formValidator({onshow:"Sila masukkan e-mel anda",onfocus:"Sila beri perhatian kepada format e-mel yang anda masukkan, contohnya: wzmaodong@126.com",oncorrect:"Terima kasih kerana anda kerjasama, anda E-mel adalah betul"}).regexValidator({regexp:"email",datatype:"enum",onerror:"format e-mel tidak betul"});

Poskod:

Salin kod Kod adalah seperti berikut:

$("#yb").formValidator({onshow:"Sila masukkan poskod",onfocus:"Ia terdiri daripada 6 digit",salah:"Terima kasih atas kerjasama anda, poskod anda betul"}).regexValidator ({regexp :"zipcode",datatype:"enum",onerror:"Format kod zip tidak betul"});

SQ:

Salin kod Kod adalah seperti berikut:

$("#qq").formValidator({onshow:"Sila masukkan nombor QQ anda", salah:"Terima kasih atas kerjasama anda, nombor QQ anda betul"}).regexValidator({regexp:"qq",datatype: "enum ",onerror:"Format nombor QQ tidak betul"});

Kad pengenalan:

Salin kod Kod adalah seperti berikut:

$("#sfz").formValidator({onshow:"Sila masukkan kad ID anda",salah:"Terima kasih atas kerjasama anda, kad ID anda betul"}).regexValidator({regexp:"idcard",datatype: "enum ",onerror:"Format kad ID tidak betul"});

Surat:

Salin kod Kod adalah seperti berikut:

$("#zm").formValidator({onshow:"Sila masukkan huruf",tidak betul:"Terima kasih atas kerjasama anda, surat anda betul"}).regexValidator({regexp:"letter",datatype:"enum" , onerror:"Format surat tidak betul"});

Huruf besar:

Salin kod Kod adalah seperti berikut:

$("#dxzm").formValidator({onshow:"Sila masukkan huruf besar",salah:"Terima kasih atas kerjasama anda, huruf besar anda betul"}).regexValidator({regexp:"letter_u",datatype:" enum ",onerror:"Format huruf besar tidak betul"});

Huruf kecil:

Salin kod Kod adalah seperti berikut:

$("#xxzm").formValidator({onshow:"Sila masukkan huruf kecil", salah:"Terima kasih atas kerjasama anda, huruf kecil anda betul"}).regexValidator({regexp:"letter_l",datatype:" enum ",onerror:"Format huruf kecil tidak betul"});

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan