ValidForm插件提供了7种提示效果,其中有四种自定义效果,具体访问地址:http://validform.rjboy.cn/demo.html

个人偏爱其中两种,即

l 提示效果四:【自定义提示效果】右侧提示,ajax提交时不弹出提示层

l 提示效果五:【自定义提示效果】固定位置显示提示信息

效果四:

设置提示位置:

tiptype:function(msg,o,cssctl){
//msg:提示信息;
//o:{obj:*,type:*,curform:*},
// obj指向的是当前验证的表单元素(或表单对象),
// type指示提示的状态,值为1、2、3、4,
// 1:正在检测/提交数据,
// 2:通过验证,
// 3:验证失败,
// 4:提示ignore状态,
// curform为当前form对象;
//cssctl:内置的提示信息样式控制函数,该函数需传入两个参数:显示提示信息的对象 和 当前提 示的状态(既形参o中的type);
if(!o.obj.is("form")){//验证表单元素时o.obj为该表单元素,全部验证通过提交表单时
o.obj为该表单对象;
var objtip=o.obj.siblings(".Validform_checktip");
cssctl(objtip,o.type);
objtip.text(msg);
}else{
var objtip=o.obj.find("#msgdemo");
cssctl(objtip,o.type);
objtip.text(msg);
}
}

html代码:

<form class="registerform" action="ajax_post.php">
<table width="100%" style="table-layout:fixed;">
<tbody>
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">昵称:</td>
<td>
<input class="inputxt Validform_error" type="text" errormsg="昵称至少6个字符,最多18个字符!" ajaxurl="valid.php" datatype="s6-18" name="name" value="">
<div class="Validform_checktip Validform_wrong">昵称至少6个字符,最多18个字符!</div>
</td>
</tr>
<tr>
<td class="need">*</td>
<td>密码:</td>
<td>
<input class="inputxt Validform_error" type="password" errormsg="密码范围在6~16位之间!" nullmsg="请设置密码!" datatype="*6-16" name="userpassword" value="">
<div class="Validform_checktip Validform_wrong">密码范围在6~16位之间!</div>
</td>
</tr>
<tr>
<td class="need">*</td>
<td>确认密码:</td>
<td>
<input class="inputxt" type="password" errormsg="您两次输入的账号密码不一致!" nullmsg="请再输入一次密码!" recheck="userpassword" datatype="*" name="userpassword2" value="">
<div class="Validform_checktip">两次输入密码需一致</div>
</td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td style="padding:10px 0 18px 0;">
<input type="submit" value="提 交">
<input type="reset" value="重 置">
<span id="msgdemo" style="margin-left:30px;"></span>
</td>
</tr>
</tbody>
</table>
</form>

效果五:

设置提示位置:

 tiptype:function(msg,o,cssctl){
var objtip=$("#msgdemo2");
cssctl(objtip,o.type);
objtip.text(msg);
}

Html代码:

<form class="registerform" action="ajax_post.php">
<table width="100%" style="table-layout:fixed;">
<tbody>
<tr>
<td class="need" style="width:10px;">*</td>
<td style="width:70px;">昵称:</td>
<td style="width:205px;">
<input class="inputxt Validform_error" type="text" errormsg="昵称至少6个字符,最多18个字符!" nullmsg="请输入昵称!" ajaxurl="valid.php" datatype="s6-18" name="name" value="" sucmsg="验证通过!">
</td>
<td></td>
</tr>
<tr>
<td class="need">*</td>
<td>密码:</td>
<td>
<input class="inputxt" type="password" errormsg="密码范围在6~16位之间!" nullmsg="请设置密码!" datatype="*6-16" name="userpassword" value="">
</td>
<td></td>
</tr>
<tr>
<td class="need">*</td>
<td style="width:205px;">确认密码:</td>
<td>
<input class="inputxt" type="password" errormsg="您两次输入的账号密码不一致!" nullmsg="请再输入一次密码!" recheck="userpassword" datatype="*" name="userpassword2" value="">
</td>
<td></td>
</tr>
<tr>
<td class="need"></td>
<td></td>
<td style="padding:10px 0 18px 0;" colspan="2">
<input type="submit" value="提 交">
<input type="reset" value="重 置">
<span id="msgdemo2" class="Validform_checktip Validform_wrong" style="margin-left:30px;">昵称至少6个字符,最多18个字符!</span>
</td>
</tr>
</tbody>
</table>
</form>

VaildForm 自定义提示消息的更多相关文章

  1. Yii自定义错误提示消息

    英文原文: http://www.yiiframework.com/wiki/1/how-to-customize-the-error-message-of-a-validation-rule/ Va ...

  2. 示例:WPF中自定义MessageService应用DialogHost、Snackbar、NotifyIcon显示各种场景提示消息

    原文:示例:WPF中自定义MessageService应用DialogHost.Snackbar.NotifyIcon显示各种场景提示消息 一.目的:不同交互场景需要提示不同的消息,不同的消息需要用不 ...

  3. 安卓socket 心跳和信鸽自定义提示音

    /** * 连接socket 和心跳 */ public class SocketService extends Service { private static addNewOrderInterfa ...

  4. 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图

    超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...

  5. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

  6. 在ASP.NET中引用自定义提示框

    在html网页中自定义提示框 正文: 在一般的B/S架构中项目,与用户的交互信息是非常重要的.在一般的情况下,设计人员都在把用户信息呈现在html中,用div和span去弹出相关信息.对于一般的情况而 ...

  7. 自定义WM_NOTIFY消息

    自定义WM_NOTIFY消息 习惯了用自定义用户消息进行各种状态的通知,特别是子窗口与父窗口之间的交互.但ON_MESSAGE没有控件ID的限制,如果有多个子窗口发送同一个消息给父窗口时,父窗口就不知 ...

  8. jQuery实现鼠标移到元素上动态提示消息框效果

    当光标移动到某些元素上时,会弹出像tips的提示框,这种效果想必大家都有见到过吧,下面有个不错的示例,大家可以感受下 当光标移动到某些元素上时,会弹出像tips的提示框. 复制代码代码如下: < ...

  9. Jquery 网站保存信息提示消息实现,提示后自动消失

    现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用alert提示消息,采用jQuery提示完消息,自动消失 css <style> #tip_message { z-in ...

随机推荐

  1. 用oop分析场景,写出代码。房间里,有人、猫、老鼠在睡觉,然后猫醒了发出叫声,叫声惊醒了人,人从床上坐起来,惊醒了老鼠,老鼠开始逃跑。

    首先分析有哪些类: 应该有房子.动物类.人类.猫类.老鼠类. 房子不仅仅是一个容器,因为猫在房子里叫,惊醒了人和老鼠,所以猫叫是一个事件,通过这个事件触发人和老鼠的惊醒. 可以定义一个委托,利用委托绑 ...

  2. paper 108:系统学习数字图像处理之图像复原与重建

    首先,必须注意这里所限制的处理条件. 关于图像退化/复原模型 退化的图像是由成像系统的退化加上额外的噪声形成的. 1.只考虑噪声引起的退化 噪声模型,包含于空间不相关和相关两种,除了空间周期噪声,这里 ...

  3. array_merge注意细节

    array_merge:合并一个或多个数组,一个数组中的值加在前一个数组的后面,返回的新数组作为结果 如果输入的数组中有相同的字符串键名,则该键名后面的值覆盖前面的,如果数组包含相同的数字键名,后面的 ...

  4. Cutterman 切图神器,虽然还没用过,先 mark 一下好了

    在官网上找了半天也没发现下载链接,注册账号用无法激活,还是等等再试吧.

  5. ddd

    MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAqiYF+Y89+3wKwCtvDOCJ6qQifvC+snwHsZEy6naujvCHXkeB/BcDDwnq ...

  6. 查看oracle被锁的表

    SELECT /*+ rule*/ a.sid, b.owner, object_name, object_type FROM v$lock a, all_objects b WHERE TYPE = ...

  7. ASP。net 测验

    Login.aspx using System; using System.Collections.Generic; using System.Linq; using System.Web; usin ...

  8. 探究platform_driver中的shutdown用途

    http://blog.csdn.net/moxiaomomo/article/details/7897943 "quiesce" 说的也不太明确,我的猜测是:比如系统中有一个大功 ...

  9. RCP:如何把Preferences中的项从一个类别移动到另一个类别

    前言 很久没写文章了,准备写一系列关于Eclipse RCP /Plugin的文章. 这些文章都是trouble shooting性质的,不准备写的很细,当你碰到这样的问题,google到时,能帮你把 ...

  10. [问题2014S04] 复旦高等代数II(13级)每周一题(第四教学周)

    [问题2014S04]  设 \(A\in M_n(\mathbb{C})\) 为可对角化的 \(n\) 阶复方阵, \(f(x)\in\mathbb{C}[x]\) 为复系数多项式, 证明: \[B ...