validForm结合layer制作表单验证提示
首先要引入jquery,Validform和layer
<script src="../js/jquery.min.js"></script>
<script src="../layer/layer.js"></script>
<script src="../js/Validform_v5.3.2_min.js"></script>
form表单带代码
<form class="demoform">
<ul class="am-u-sm-12 am-u-md-6 am-cf"><li>籍贯:<input type="text" value="湖北武汉" datatype="*" nullmsg="请填写籍贯"></li><li>民族:<input type="text" value="汉族" datatype="*" nullmsg="请填写民族信息" ></li><li>手机号:<input type="text" datatype="m" nullmsg="请填写手机号码" errormsg="请填写正确的手机号码" value="18888888888"></li><li>电子邮箱:<input type="text" datatype="e" errormsg="请填写正确的电子邮箱" nullmsg="请填写电子邮箱" value="2666@qq.com"></li><li>家庭详细住址:<input type="text" value="地址" datatype="*" nullmsg="请填写家庭详细住址"></li>
</ul>
</form>
关于validform的相关设置
$('.demoform').Validform({btnSubmit:"#btn_sub", btnReset:".btn_reset",tiptype:1, ignoreHidden:false,dragonfly:false,tipSweep:true,label:".label",showAllError:false,postonce:true,ajaxPost:true,datatype:{},usePlugin:{swfupload:{},datepicker:{},passwordstrength:{},jqtransform:{selector:"select,input"}},beforeCheck:function(curform){//在表单提交执行验证之前执行的函数,curform参数是当前表单对象。//这里明确return false的话将不会继续执行验证操作; },beforeSubmit:function(curform){//在验证成功后,表单提交前执行的函数,curform参数是当前表单对象。//这里明确return false的话表单将不会提交; },callback:function(data){//返回数据data是json对象,{"info":"demo info","status":"y"}//info: 输出提示信息;//status: 返回提交数据的状态,是否提交成功。如可以用"y"表示提交成功,"n"表示提交失败,在ajax_post.php文件返回数据里自定字符,主要用在callback函数里根据该值执行相应的回调操作;//你也可以在ajax_post.php文件返回更多信息在这里获取,进行相应操作;//ajax遇到服务端错误时也会执行回调,这时的data是{ status:**, statusText:**, readyState:**, responseText:** };//这里执行回调操作;//注意:如果不是ajax方式提交表单,传入callback,这时data参数是当前表单对象,回调函数会在表单验证全部通过后执行,然后判断是否提交表单,如果callback里明确return false,则表单不会提交,如果return true或没有return,则会提交表单。}
});
以上是validform的相关配置说明,具体参照validform的原api地址:validform API
这里要结合layer做表单验证提示,最主要的一个参数就是tiptype
tiptype的相关参数描述
可用的值有:1、2、3、4和function函数,默认tiptype为1。 3、4是5.2.1版本新增
1=> 自定义弹出框提示;
2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
3=> 侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象,表单以ajax提交时不显示表单的提交状态);
如果上面的4种提示方式不是你需要的,你可以给tiptype传入自定义函数。通过自定义函数,可以实现你想要的任何提示效果:
tiptype:function(msg,o,cssctl){//msg:提示信息;//o:{obj:*,type:*,curform:*},//obj指向的是当前验证的表单元素(或表单对象,验证全部验证通过,提交表单时o.obj为该表单对象),//type指示提示的状态,值为1、2、3、4, 1:正在检测/提交数据,2:通过验证,3:验证失败,4:提示ignore状态, //curform为当前form对象;//cssctl:内置的提示信息样式控制函数,该函数需传入两个参数:显示提示信息的对象 和 当前提示的状态(既形参o中的type);
}
tiptype不为1时,Validform会查找class为”Validform_checktip”的标签显示提示信息。tiptype=1时,会自动创建弹出框显示提示信息。
Validform_checktip和表单元素之间的位置关系,会根据tiptype的值有对应的结构,上面已经做了说明。
5.3版本开始,如果页面里没有显示出错信息的标签,会根据tiptype值自动创建Validform_checktip对象。
JS逻辑层代码
$(".demoform").Validform({// tiptype ,自定义弹出层tiptype:function(msg,o){if (o.type == 3){// 只有在验证失败的时候,才会弹出相关的信息layer.msg(msg, {time: 800}); }}
})
validForm结合layer制作表单验证提示相关推荐
- element-ui清除表单验证提示语
一.需求描述: 使用了element-ui的表单, 点击发布当物流单号为空时,会出现提示,如果我通过上方下拉框切换了物流名称,我希望能够主动的清除下方的红色提示信息. 二.解决方案 1.编写表单代码, ...
- VUE+ElementUI的表单el-from表单验证二选一必填项,并且满足条件后会清除表单验证提示。
效果图: 使用Element-UI的自定义验证实现. 这里面有个坑是,两个input输入框都点出了提示信息,填写任一输入框之后只有操作的那一项的验证提示消失了,不主动清除另一项的验证提示就会一直存在, ...
- h5 php表单验证,H5表单验证失败该怎样提示
这次给大家带来H5表单验证失败该怎样提示,怎么用H5表单验证失败的提示?H5表单验证失败提示的注意事项有哪些,下面就是实战案例,一起来看一下. 我们知道,前端的童鞋在写页面时, 都不可避免的总会踩到 ...
- 分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您 下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
- 表单验证之validform.js使用方法
Validform使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Va ...
- php form表单验证,Validform表单验证总结篇
近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法: Demo:$(".demoform").Validform( ...
- 购物车的制作 与注册表单验证
购物车的制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- Validform表单验证框架详解
Validform是另外一种表单验证框架,也是基于jQuery框架,用法比较灵活. 这里使用该框架的版本号为: Validform_v5.3.2 官网:http://validform.rjboy.c ...
- Validform表单验证总结
本文转载自: https://www.cnblogs.com/dreamflycc/p/5073820.html 作者:dreamflycc 转载请注明该声明. 近期项目里用到了表单的验证,选择了Va ...
最新文章
- 有意思的。带情感的语音转换,可以下载!
- Get Started with Omni-Channel
- FPGA进阶篇--SPI控制双通道16bit串行DAC8532
- 寻找最优参数解:最速下降法,牛顿下降法,阻尼牛顿法,拟牛顿法
- 网络组Network Teaming
- 实用Python库,这几个你认识不?
- layui 开启关闭标签_欧盟发布照明产品ErP及能效标签法规新草案
- ifram嵌入网址 有跨域问题
- java中throws和throw的区别和用法
- centos7 cuda测试_CentOS 7 安装 NVIDIA 显卡驱动以及CUDA驱动(自测可用)
- 计算机系统-电路设计06-振荡器的内部电路实现
- 运行HelloJersey遇到异常解决方法
- 缘 一篇文章 里面有很多喜欢的句子,日后阅读慢慢标记
- 赛事相关 | 腾讯觅影×腾讯云TI平台,锁了
- 麻省理工学院——人工智能公开课06
- 模仿某丰的 快递单号输入
- gsoap linux中文乱码,gsoap中文乱码及内存清理等问题的解决方案
- 精选教程:来亲手开发个问答社区,干掉知乎!
- 为知笔记 | 3 分钟创建格式美美的笔记
- IDEA不支持SQL语法校验,一招搞定