The blogger recommended jQuery Validate before, because it was used before, but the configuration was a little bit cumbersome. Until the recent project used the validform, it opened my eyes. The whole interface suddenly felt too friendly. Let's take a few renderings first.

There are very few css and js references in the whole process.

css is as follows:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

/*==========The following sections are required for the Validform===========*/     /*==========It can be modified according to your own preference (the icon used will be provided later)===========*/   .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(/Public/home/images/right.png) no-repeat left center;   }   .Validform_wrong{     color:red;     padding-left:20px;     white-space:nowrap;     background:url(/Public/home/images/error.png) no-repeat left center;   }   .Validform_loading{     padding-left:20px;     background:url(/Public/home/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');}   #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:#000;}   #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:#cc0;}   #Validform_msg .Validform_info{padding:8px;border:1px solid #000; border-top:none; text-align:left;}

js references are not many, just fixed.

1 2 3 4 5 6 7 8 9

<script type="text/javascript" src="/Public/home/js/Validform_v5.3.2_min.js"></script> <script type="text/javascript"> $(function(){     $("#signupform").Validform({//Give the form an id     tiptype:3,//1,2,3 show different effects, you can try it yourself, of course, 3 is the best     showAllError:true//All error prompts are displayed. The default is OK   }); }) </script>

Here are some sample codes of the form:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<table width="80%">             <tr>               <td width="100">User name</td>               <td width="*"><input type="text" name="username" id="username" datatype="s2-12" nullmsg="Please enter the user name!" errormsg="Nickname must be at least 2 characters,Up to 12 characters!" ajaxurl="<?php echo U('user/checkName') ?>" placeholder="2-12 Character"/></td>                             </tr>             <tr>               <td width="100">Set password</td>               <td><input type="password" name="password" id="password" datatype="*6-16" nullmsg="Please set password!" errormsg="Password range is 6~16 Between bits!" placeholder="6-16 Character"/></td>             </tr>                 <tr>               <td width="100">Confirm password</td>               <td><input type="password" name="repassword" id="repassword" datatype="*6-16"  recheck="password" nullmsg="Please set the confirmation password!" errormsg="Please keep the same password as above!" placeholder="6-16 Character"/></td>             </tr>

The data type plug-in js has instructions (see js source code for details)

1

{"*":"Cannot be empty!","*6-16":"Please fill in any 6 to 16 characters!","n":"Please fill in the number!","n6-16":"Please fill in 6 to 16 digits!","s":"Special characters cannot be entered!","s6-18":"Please fill in 6 to 18 characters!","p":"Please fill in postal code!","m":"Please fill in the mobile number!","e":"Email address format is wrong!","url":"Please fill in the website!"}

What we need to pay attention to is that ajaxurl is asynchronous authentication, and the complex steps of writing form authentication by ourselves before have been eliminated, such as whether the user name and mailbox are repeated, whether the original password is equal, and whether the two input passwords are consistent, so there is nothing else. Bloggers can do their best if necessary.

To add a point about ajaxurl, you can pass parameters. Take the thinkphp framework as an example. Ajaxurl = "< PHP echo U ('user / checkname ', array ('type1' = > 1, 'type2' = > 2))?" > ", please open firebug or network to check the parameter transmission. This method of parameter transmission must use get to receive (I('get.type1'),I('get.type2')).

Three small picture bloggers steal a lazy, directly on the right, please take away, pay attention to rename Oh!