jquery-based form Check plugin-Rjboy's validform Experience

Official address: http://validform.rjboy.cn/document.html

Quote JS and add the following CSS to use the

.  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;}

The invocation method is also very simple,

$ (". Demoform"). ValidForm ();

If you want to extend it dynamically, you can assign the object after the instance to a variable:

var validator=$ (". Demoform"). ValidForm (); validator.tipmsg.s= "error! No message inputed. ";

It's also easy to define a new rule

datatype:{    "zh2-4":/^[\u4e00-\u9fa5\uf900-\ufa2d]{2,4}$/,    "Phone": function (GETS,OBJ,CURFORM,REGXP) {        //Parameter gets is the form element value obtained,//obj is the        current form element,        //curform is the currently validated form,//REGXP is a        reference to some of the built-in regular expressions.                //return False indicates a validation error, no return or return TRUE indicates validation passed.    }}

A few suggestions:

• Validation group is not supported, if I want to implement mobile phone number and fixed phone two at least one of the input is not very good implementation;
• It may be considered that the relevant labels should be replaced with data-* in the form of compatible HTML5;
• If you can set the display location of the cue information (top,bottom,left,right) in the configuration, it is more convenient to point;
• Can be used to support the WAP version of the information prompted in the form of bubble;

　　

　　

JQuery-based form validation plug-in-validform experience with Rjboy