JavaScript插件系列——Validform 5.3.2 使用示例
关于Validfrom:为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实!
官方网站:http://validform.rjboy.cn/
在线文档:http://validform.rjboy.cn/document.html
1 $(function () { 2 //注册 3 var registForm = $("#regist_form").Validform({ 4 btnSubmit : "#regist_btn", 5 tiptype : 2, 6 showAllError : false, 7 postonce : true, 8 usePlugin : { 9 passwordstrength : { 10 minLen : 6, 11 maxLen : 20, 12 trigger : function (obj, error) { 13 if (error) { 14 obj.parent().next().find(".Validform_checktip").show(); 15 obj.parent().next().find(".passwordStrength").hide(); 16 } else { 17 obj.parent().next().find(".Validform_checktip").hide(); 18 obj.parent().next().find(".passwordStrength").show(); 19 } 20 } 21 } 22 }, 23 beforeSubmit : function (curform) { 24 if (($("#verify_err").hasClass("Validform_wrong"))) { 25 return false; 26 } else { 27 $("regist_btn").submit(); 28 } 29 } 30 }); 31 registForm.tipmsg.r = " "; 32 registForm.tipmsg.v = " "; 33 34 //登陆 35 var loginForm = $("#login_form").Validform({ 36 btnSubmit : "#login_btn", 37 tiptype : function (msg, o, cssctl) { 38 //不显示成功通过时候的图标 39 if (!o.obj.is("form")) { 40 var objtip = o.obj.parent().next().find(".Validform_checktip").text(msg); 41 cssctl(objtip, o.type); 42 objtip.text(msg); 43 } 44 }, 45 ignoreHidden : true, 46 showAllError : false, 47 ajaxPost : true, 48 beforeSubmit : function (form) { 49 $(".verify input[type='text']").focus(function () { 50 $("#regist_btn").click(function () { 51 $(".verify input[type='text']").blur(); 52 }) 53 }) 54 var pass = $("input[name='password']").val(); 55 if (pass != "") { 56 $("input[name='password']").val($.md5(pass)); 57 } 58 }, 59 callback : function (e) { 60 if (e.status == -1) { 61 $("#login_err").html(" "); 62 $("#verify_refresh").click(); 63 $("#verify_err").text(e.info).removeClass("Validform_right").addClass("Validform_wrong"); 64 } else if (e.status == 1) { 65 $("#login_err").html(e.info).css("color", "#71B83D"); 66 $("#login_btn").unbind("click"); 67 setTimeout(function () { 68 location.href = e.data.jumpurl; 69 }, 500) 70 } else { 71 $("#login_err").html(e.info).css("color", "red"); 72 $("#verify_refresh").click(); 73 $(".verify input[type='text']").val("") 74 $("input[name='password']").val("").focus(); 75 if (e.status == 0 && e.data > 3) { 76 $("#login_verify").show(); 77 } 78 } 79 } 80 }); 81 loginForm.tipmsg.r = " "; 82 loginForm.tipmsg.v = " "; 83 })