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实时验证username--><input type="text"value=""name="name"datatype="s5-16"ajaxurl="valid.php"nullmsg="请输入username!"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="您两次输





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





谢您花费宝贵时间给我们提供反馈,请填写有效内容!

"datatype="s"altercss="gray"class="gray"name="msg"value="">请在这里输入您的意见。</textarea><!--单选button--><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>

ValidForm的使用的更多相关文章

  1. Validform使用ajax详解

    demo.config({    showAllError:true,    url:"这里指定提交地址",    ajaxpost:{        //可以传入$.ajax() ...

  2. Validform表单验证总结

    近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法:Demo: $(".demoform").Validform( ...

  3. Validform —— 再也不用担心“表单验证”!

    <!doctype html> <html> <head> <meta content="text/html" charset=" ...

  4. Validform 学习笔记---代码练习

    上一节主要梳理了validform的基础知识,针对这些基础知识,编写代码的时候,也整理的部分知识,先记录以便后期温习. 验证部分的css @charset "utf-8"; /* ...

  5. Validform 学习笔记---基础知识整理

    面对表单的验证,自己写大量的js毕竟不是一个明智的做法.不仅仅是代码很长而且不便于梳理.Validform就是一款开源的第三方验证js的控件,通过添加相应的js以及css能够有效的验证表单,维护起来也 ...

  6. 【jquery】Validform,一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  7. 表单验证之validform.js使用方法

    一.validform有什么用? 网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗.如果不是数字,弹窗. 所以要将这么多验证交给一个js去验证. 二.我现在 ...

  8. 表单校验组件ValidForm

    10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中 (文件里这个注释 "/*==========以下部分是Validf ...

  9. Validform自定义提示效果-使用自定义弹出框

    $(function(){ $.Tipmsg.r=null; $("#add").Validform({ tiptype:function(msg){ layer.msg(msg) ...

  10. Validform:一行代码搞定整站的表单验证!

    表单验证不再发愁,http://validform.rjboy.cn/

随机推荐

  1. 创建cifs系统案例之“实现将Windows磁盘共享至Linux”

    原创作品,出自 "深蓝的blog" 博客,欢迎转载,转载时请务必注明出处,否则追究版权法律责任. 深蓝的blog:http://blog.csdn.net/huangyanlong ...

  2. 通过setSystemUiVisibility实现状态栏跟Activity之间的位置关系

    曾经说到去除状态栏和标题栏总会用到动态代码的方式实现: getWindow().setFlags(WindowManager.LayoutParams. FLAG_FULLSCREEN , Windo ...

  3. gdbserver 远程调试问题:设置文件和so搜索路径

    编写一个必定crash 的程序 #include <stdio.h> void crash(){ char *a=0; *a=0; } int main() { printf(" ...

  4. Android学习笔记(十二)——使用意图传递数据的几种方式

    使用意图传递数据的几种方式 点此获取完整代码 我们除了要从活动返回数据,也经常要传递数据给活动.对此我们能够使用Intent对象将这些数据传递给目标活动. 1.创建一个名为PassingData的项目 ...

  5. BZOJ 3160: 万径人踪灭 FFT+快速幂+manacher

    BZOJ 3160: 万径人踪灭 题目传送门 [题目大意] 给定一个长度为n的01串,求有多少个回文子序列? 回文子序列是指从原串中找出任意个,使得构成一个回文串,并且位置也是沿某一对称轴对称. 假如 ...

  6. 【POJ 2481】 Cows

    [题目链接] http://poj.org/problem?id=2481 [算法] 树状数组 注意特判两头牛的s,e值相同 [代码] #include <algorithm> #incl ...

  7. jquery中命名冲突问题

    例如用jq代替$符号 var jq = $.noConflict()

  8. 原生js实现复选框

    简单排版 <style> .box { display: flex; align-items: center; } #allSelect, p { width: 20px; height: ...

  9. Habernate配置一对一,一对多,多对多(二)

    一.开篇 紧接着上篇的博客来写:http://www.cnblogs.com/WJ--NET/p/7845000.html(habernate环境的搭建) 二.配置一对一 2.1.新建客户类和公司类( ...

  10. php链接memcache操作

    设置值 set key 压缩标识 有效期 长度 set name 0 60 5 hello 压缩标识:用于告诉memcached服务器是否压所后存储数据,目的是为了节省磁盘空间,压所和解压缩会消耗时间 ...