ValidForm的使用

来源:互联网 发布:91视频解析网站源码 编辑:程序博客网 时间:2024/04/30 12:56

1.引入css
请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的)。
2.引入js (jquery 1.4.3 以上版本都可以)
<script type="text/javascript" src="<%=basePath%>/css/js/jquery-1.8.3.min.js">



3.初始化,就这么简单
$(".demoform").Validform();
注1:
指定ajax实时验证的后台文件的地址时,后台页面可以用getRequest().getParameter("param")与getRequest().getParameter("name") 接收到值,Ajax中会POST过来变量param和name。param是文本框的值,name是文本框的name属性。
注2:
内置基本的datatype类型有: * | *6-16 | n | n6-16 | s | s6-18 | p | m | e | url |radio | checkbox | select
注3:
datatype说明
*:检测是否有输入,可以输入任何字符,不留空即可通过验证;
*6-16:检测是否为6到16位任意字符;
n:数字类型;
n6-16:6到16位数字;
s:字符串类型;
s6-18:6到18位字符串;
p:验证是否为邮政编码;
m:手机号码格式;
e:email格式;
url:验证字符串是否为网址。
radio:如果要验证的元素为单选框,datatype设置为radio;
checkbox:如果要验证的元素为复选框,datatype设置为checkbox;
select:如果要验证的元素为下拉框,datatype设置为select。
注意radio,checkbox,select的value值为空时不能通过检测,要非空值才能通过。
radio和checkbox元素只需给该组的第一个元素绑定datatype属性即可,请参看下面的示例代码。
其他的附加属性:
nullmsg:是指定没有填入内容时出现的提示信息,不指定默认是“请填入信息!”,另外当datatype为radio、checkbox或select时,因为这三种类型只要为空值就表示出错,提示errormsg所指定信息,所以这三类不需要绑定该属性;
errormsg:是指定验证格式不符时出现的提示信息,不指定默认是“请输入正确信息!”;
recheck:是用来指定两个表单元素值一致性检测的另外一个对象,赋给它另外一个对象的name属性值即可;
tip:是指定表单元素的提示信息;指定后该元素会有focus时提示信息消去,没有输入内容blur时出现提示信息的效果,请参看demo页的“备注”效果;
altercss:是指定有tip属性的元素默认提示文字显示时的样式,当该元素focus时程序会把这个样式去掉,blur时如果值为空或者跟提示文字一样则再加上该样式;
ajaxurl:指定ajax实时验证的后台文件路径,给需要后台数据库验证信息的对象绑定该属性。注意该文件输出的内容就是前台显示的验证出错的反馈信息,如果验证通过请输出小写字母”y”

示例代码:<!--ajax实时验证用户名--><input type="text"value=""name="name"datatype="s5-16"ajaxurl="valid.php"nullmsg="请输入用户名!"errormsg="昵称至少5个字符,最


多16个字符!"/><!--密码--><input type="password"value=""name="userpassword"datatype="*6-15"errormsg="密码范


围在6~15位之间,不能使用空格!"/><!--确认密码--><input type="password"value=""name="userpassword2"datatype="*"recheck="userpassword"errormsg="您两次输


入的账号密码不一致!"/><!--默认提示文字--><textarea tip="请在这里输入您的意见。"errormsg="很感


谢您花费宝贵时间给我们提供反馈,请填写有效内容!"datatype="s"altercss="gray"class="gray"name="msg"value="">请在这里输入您的意见。</textarea><!--单选按钮--><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>
0 0
原创粉丝点击