标签：jquery插件
</pre><span style="font-family:FangSong_GB2312;font-size:18px;"><strong>1.引入css</strong></span><p></p><p><span style="margin:0px; padding:0px; word-wrap:break-word; line-height:25px"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><link href="<%=basePath%>/Validform_v5.3.2/css/style.css" type="text/css" rel="stylesheet" media="all"/></span></span></span></p><p><span style="margin:0px; padding:0px; word-wrap:break-word; line-height:25px"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><strong>2.引入js （jquery 1.4.3 以上版本都可以）</strong></span></span></span></span></p><p><span style="margin:0px; padding:0px; word-wrap:break-word; line-height:25px"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><script type="text/javascript"<span style="white-space:pre"> </span>src="<%=basePath%>/css/js/jquery-1.8.3.min.js"></script></span></span></span></span></p><p><span style="margin:0px; padding:0px; word-wrap:break-word; line-height:25px"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><script type="text/javascript" src="<%=basePath%>/Validform_v5.3.2/js/Validform_v5.3.2.js"></script></span></span></span></span></p><p style="text-align:justify"><span style="color: rgb(51, 51, 51);"><span style="line-height:28px"><span style="font-family:FangSong_GB2312;font-size:18px;">或</span></span></span></p><p><span style="margin:0px; padding:0px; word-wrap:break-word; line-height:25px"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><img src="http://img.blog.csdn.net/20150724094537455?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></span></span></span></p><p><span style="margin:0px; padding:0px; word-wrap:break-word; line-height:25px"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="color:rgb(51,51,51); line-height:28px; text-align:justify"></span></span></span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><strong>3.初始化，就这么简单</strong></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;">$(".demoform").Validform();</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><strong>注1：</strong></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="font-family:FangSong_GB2312;font-size:18px;">指定ajax实时验证的后台文件的地址时，后台页面可以用getRequest().getParameter("param")与getRequest().getParameter("name") 接收到值，Ajax中会POST过来变量param和name。param是文本框的值，name是文本框的name属性。</span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="font-family:FangSong_GB2312;font-size:18px;"><strong>注2：</strong></span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="line-height: 25px;">内置基本的datatype类型有： * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url |<span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;">radio | checkbox | select</span></span></span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="line-height: 25px;"><span style="font-family:FangSong_GB2312;font-size:18px;"><strong>注3：</strong></span></span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="line-height: 25px;"><span style="font-family:FangSong_GB2312;font-size:18px;">datatype说明</span></span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="line-height: 25px;"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="line-height: 25px;">*:检测是否有输入，可以输入任何字符，不留空即可通过验证；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">*6-16:检测是否为6到16位任意字符；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">n:数字类型；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">n6-16:6到16位数字；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">s:字符串类型；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">s6-18:6到18位字符串；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">p:验证是否为邮政编码；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">m:手机号码格式；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">e:email格式；</span><br style="margin: 0px; padding: 0px; word-wrap: break-word; line-height: 25px;" /><span style="line-height: 25px;">url:验证字符串是否为网址。</span></span></span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="line-height: 25px;"><span style="line-height: 25px;"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="white-space:pre"></span>radio:如果要验证的元素为单选框,</span></span></span></span>datatype设置为radio;</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="line-height: 25px;"><span style="line-height: 25px;"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;"><span style="white-space:pre"></span>checkbox:如果要验证的元素为复选框,</span></span></span>datatype设置为checkbox;</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>select:如果要验证的元素为下拉框,datatype设置为select。</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>注意radio,checkbox,select的value值为空时不能通过检测,要非空值才能通过。</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>radio和checkbox元素只需给该组的第一个元素绑定datatype属性即可,请参看下面的示例代码。</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;">其他的附加属性:</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>nullmsg:是指定没有填入内容时出现的提示信息,不指定默认是“请填入信息!”,另外当datatype为radio、checkbox或select时,因为这三种类型只要为空值就表示出错,提示errormsg所指定信息,所以这三类不需要绑定该属性;</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>errormsg:是指定验证格式不符时出现的提示信息,不指定默认是“请输入正确信息!”;</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>recheck:是用来指定两个表单元素值一致性检测的另外一个对象,赋给它另外一个对象的name属性值即可;</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>tip:是指定表单元素的提示信息;指定后该元素会有focus时提示信息消去,没有输入内容blur时出现提示信息的效果,请参看demo页的“备注”效果;</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>altercss:是指定有tip属性的元素默认提示文字显示时的样式,当该元素focus时程序会把这个样式去掉,blur时如果值为空或者跟提示文字一样则再加上该样式;</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="white-space:pre"></span>ajaxurl:指定ajax实时验证的后台文件路径,给需要后台数据库验证信息的对象绑定该属性。注意该文件输出的内容就是前台显示的验证出错的反馈信息,如果验证通过请输出小写字母”y”</span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="color: rgb(51, 51, 51); line-height: 28px; text-align: justify;">示例代码</span></span></p><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; color:rgb(51,51,51); line-height:28px; text-align:justify"><span style="font-family:FangSong_GB2312;font-size:18px;"><span style="line-height: 25px;"></span></span></p><pre name="code" class="html"><span style="font-family:FangSong_GB2312;font-size:18px;"><!--单选按钮-->
<input type="radio" value="1" name="gender" id="male" datatype="radio"
errormsg="请选择性别!" />
<label for="male">
男
</label>
<input type="radio" value="2" name="gender" id="female" />
<label for="female">
女
</label>
<!--复选框-->
<input name="shoppingsite2" id="shoppingsite21" type="checkbox" value="1"
datatype="checkbox" errormsg="请选择您常去的购物网站!" />
<label for="shoppingsite21">
淘宝网
</label>
<input name="shoppingsite2" id="shoppingsite22" type="checkbox" value="2"
/>
<label for="shoppingsite22">
当当网
</label>
<!--下拉框-->
<select name="province" id="province" datatype="select" errormsg="请选择省份!">
<option value="">
--请选择省份--
</option>
<option value="1">
江西省
</option>
</select></span>版权声明：本文为博主原创文章，未经博主允许不得转载。
标签：jquery插件
原文地址：http://blog.csdn.net/baidu_25310663/article/details/47036265
