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 })

 

posted @ 2013-10-08 22:44  那盏`月明  阅读(1520)  评论(0编辑  收藏  举报