一、validform是什么?
validform是一款智能的表单验证js插件,它是基于jQuery库与css,我们只需要把表单对象放入,
就可以对整个表单数据进行验证,而不需要每次验证都要写个js脚本。
二、validform优点
1. 自定义你想要的信息提示效果 (弹窗提示 ---- 右侧提示)
2. 智能的错误信息提示
3. 可以指定需要验证的和不需要验证的区域
例如
ignore
绑定了ignore="ignore"的表单元素,在有输入时, 会验证所填数据是否符合datatype所指定数据类型,
没有填写内容时则会忽略对它的验证;
4. 基于form对象操作
5.validform与js脚本的区别
validform是对js进行了封装
js脚本验证字符串类型:6到18位字符串 : /^[\u4E00-\u9FA5\w\.\s]{6,18}$/
还要if进行判断,使用起来非常麻烦
而validform 直接在需要验证的input框中使用 datatype="s6-18"
<!--引入css -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/validform/css/style.css" type="text/css" media="all" />
<!-- 引入jquery -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-1.7.js"></script>
<!--引入validform -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/validform/validform-js/Validform_v5.3.2(1)/Validform_v5.3.2_ncr_min.js"></script>
初始化:
$(function(){
var demo=$(".demoform").Validform({
});
})
三、使用步骤
1、引入css,js
2、定义载体
3、初始化
datatype
传入自定义datatype类型,可以是正则,也可以是函数
*:检测是否有输入,可以输入任何字符,不留空即可通过验证;
*6-16:检测是否为6到16位任意字符;
n:数字类型;
n6-16:6到16位数字;
s:字符串类型;
s6-18:6到18位字符串;
p:验证是否为邮政编码;
m:手机号码格式;
e:email格式;
url:验证字符串是否为网址。
中文需要自己定义
<input datatype="n2-6">
如果数据类型与底层封装的数据类型相同 那么我们自定义的优先级大于底层封装
datatype:{
"m":/^[1][1,3,5,8,4]\d{9}$/,
"china2-6":/^[\u4e00-\u9fa5]{2,6}$/,
}
nullmsg (null提示)
当表单元素值为空时的提示信息,不绑定,默认提示"请填入信息!"。
如:nullmsg="请填写用户名!"
<input datatype="n2-6" nullmsg="请填写密码">
errormsg(错误提示)
输入内容不能通过验证时的提示信息,默认提示"请输入正确信息!"。
如:errormsg="用户名必须是2到4位中文字符!"
<input datatype="n2-6" errormsg="请填写2-6位数字密码">
recheck(二次验证,保证输入的一致性)
常用于:确认密码
recheck就是用来指定需要比较的另外一个表单元素。
如:密码文本中name="pw" 那么我们确认密码文本中绑定上 recheck="密码文本中name的值"
密码<input datatype="n2-6" name="pw" errormsg="请输入2-6位数字" nullmsg="请填写密码">
确认密码<input datatype="n2-6" recheck="pw" errormsg="俩次密码不一致" nullmsg="请填写密码1">
可以为1、2 、3、4和 自定义函数。1 表示弹出提示框,是默认值(
使用1和3就够了
)
1=> 自定义弹出框提示;
(常用)
2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
(该元素的父节点的下一个节点中显示)没什么卵用
3=> 侧边提示(会在当前元素的siblings(相邻)对象中查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
(该元素的相邻元素)(常用)
4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象,表单以ajax提交时不显示表单的提交状态);
(该元素的父节点的下一个节点中显示)
没什么卵用
label(html中的<label>)
意思就是聚焦 将label中所有的内容聚焦在一起作为一个整体
tip
表单里经常有些文本框需要默认就显示一个灰色的提示文字,当获得焦点时提示文字消失,失去焦点时提示文字显示。
tip属性就是用来实现这个效果。它和altercss搭配使用。
如<input type="text" value="默认提示文字" tip="默认提示文字" altercss="任意写" />
value与tip的值必须是相同的
altercss
它需要和tip属性配合使用,altercss指定的样式名,会在文本框获得焦点时被删除,没有输入内容而失去焦点时重新加上。
指定当前表单下的哪一个按钮触发表单提交事件,如果表单下有submit按钮时可以省略该参数。
如:
btnSubmit:"#sub"
是该表单下要绑定点击提交表单事件的按钮;
btnReset(重置)(初始化参数)
如:btnReset:"#res"是该表单下要绑定点击重置表单事件的按钮;
ajaxurl:(进行实时验证)
使用 ajaxurl 时首先会对我们定义的datatype进行验证,只有验证通过后才会请求方法数据。
前台到后台:
前台:
在需验证的文本中绑定 ajaxurl 属性 后跟上路径,当我们失去光标时会直接请求我们定义的方法
后台:
ajaxurl指定的方法可以接收到Post方式传过来的两个值,后台接收分别是param和name(后台定义的属性驱动),param是该元素的值.
name是该元素的name属性值。(可忽略)
后台往前台:
后台:
使用ajaxurl后台往前台传值须是含有status(状态) info(提示信息)值的json数据!
status的值 成功为小写字母 "y" 失败为小写字母 "n" (不然样式会出错)
前台会自动识别
<input type="text" ajaxurl="validformAction!toValidform.action" name="valid.ename" datatype="china">
beforeSubmit()(初始化参数)
函数内可以调用js 进行判断等等
在表单验证通过,提交表单数据之前执行的函数
函数return false的话表单将不会提交;
如:
beforeSubmit:function(){
insertEmpInfo();//调用增加方法(ajax)
//return false;
},
转 http://www.cnblogs.com/dengheng/p/5798938.html