基于jquery的表单校验插件 - rjboy的Validform使用体验

时间：2022-04-29 01:29:34

官方地址：http://validform.rjboy.cn/document.html

引用js后再加上以下css就可以使用了

.Validform_checktip{

  margin-left:8px;

  line-height:20px;

  height:20px;

  overflow:hidden;

  color:#999;

  font-size:12px;

}

.Validform_right{

  color:#71b83d;

  padding-left:20px;

  background:url(images/right.png) no-repeat left center;

}

.Validform_wrong{

  color:red;

  padding-left:20px;

  white-space:nowrap;

  background:url(images/error.png) no-repeat left center;

}

.Validform_loading{

  padding-left:20px;

  background:url(images/onLoad.gif) no-repeat left center;

}

.Validform_error{

  background-color:#ffe7e7;

}

#Validform_msg{color:#7d8289; font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; width:280px; -webkit-box-shadow:2px 2px 3px #aaa; -moz-box-shadow:2px 2px 3px #aaa; background:#fff; position:absolute; top:0px; right:50px; z-index:99999; display:none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999'); box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);}

#Validform_msg .iframe{position:absolute; left:0px; top:-1px; z-index:-1;}

#Validform_msg .Validform_title{line-height:25px; height:25px; text-align:left; font-weight:bold; padding:0 8px; color:#fff; position:relative; background-color:#999;

background: -moz-linear-gradient(top, #999, #666 100%); background: -webkit-gradient(linear, 0 0, 0 100%, from(#999), to(#666)); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666');}

#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited{line-height:22px; position:absolute; right:8px; top:0px; color:#fff; text-decoration:none;}

#Validform_msg a.Validform_close:hover{color:#ccc;}

#Validform_msg .Validform_info{padding:8px;border:1px solid #bbb; border-top:none; text-align:left;}

调用方法也很简单，

$(".demoform").Validform();

如果想对其进行动态扩展，可以把实例后的对象赋给一个变量:

var validator=$(".demoform").Validform();

validator.tipmsg.s="error! no message inputed.";

定义一个新的规则也很容易

datatype:{

    "zh2-4":/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,

    "phone":function(gets,obj,curform,regxp){

        //参数gets是获取到的表单元素值，

        //obj为当前表单元素，

        //curform为当前验证的表单，

        //regxp为内置的一些正则表达式的引用。

        //return false表示验证出错，没有return或者return true表示验证通过。

    }

}

几点建议：

  • 不支持验证组，如果我想实现手机号和固定电话两个至少输入一个就不太好实现；
  • 可以考虑给相关标签改为以data-*的形式以兼容html5；
  • 如果能在配置中设定提示信息的显示位置（top,bottom,left,right）就更方便点了；
  • 可以针对wap版支持汽泡形式的信息提示；　

　　

　　

相关文章