手机网站form表单check神器——Validform
手机端的商城项目已经上线了很久,但一直留有令人耿耿于怀的问题——form表单没有找到合适的validate,也就是说项目的input标签check只是做在了后台,前端并没有进行验证,这显然给后台服务器平添了很多烦恼(这活儿不应该我干,但现在我却不得不干),但是今天我找到了一款好的插件。
找这个组件可没少花心思,看下图就能明白其中的辛苦!
一、组件下载和使用
Validform的优点我就不再赘述,第一张图就可以看得出来,我们直接下载吧!
直接下载压缩包,里面的demo很全。
把Validform_v5.3.2.js和style.css(只需要“以下部分是Validform必须的”注释一下的)导入到项目中。
<script type="text/javascript" src="${ctx}/components/validate/js/Validform_v5.3.2.js"></script>
<link type="text/css" rel="stylesheet" href="${ctx}/components/validate/css/style.css" />
二、玩转Validform,只需这5点
1. 构建form表单和input
<form class="form-signin required-validate" action="${ctx}/login?callbackType=forward" method="post"onsubmit="return validateCallback(this, ecAjaxDone)"><input type="text" name="username" datatype="*" nullmsg="请输入手机号码、邮箱、会员账号", placeholder="手机号码、邮箱、会员账号" value="${username}" autocomplete="off"><button class="login-btn common-div" type="submit" disabled="disabled">登录</button>
</form>
①、from表单上设置action、onsubmit(附带两个方法validateCallback和ecAjaxDone)
②、input 上设置datatype、nullmsg
③、type为submit的button
2. 初始化form表单
$(function() {// validate form$("form.required-validate").each(function() {var $form = $(this);YUNM.debug("form.required-validate" + $form.selector);$.Tipmsg.r = null;// 通过验证的信息取消显示$.Tipmsg.p = null;// form表单提交过程中点击submit后的信息提示取消显示$form.Validform({// 定制提示消息tiptype : function(msg, o, cssctl) {$.showErr(msg);// 这里换成你项目的方式},tipSweep : true,// 只在表单提交时触发检测,blur事件将不会触发检测});});});
3. 定制ajaxpost
function validateCallback(form, callback, confirmMsg) {YUNM.debug("进入到form表单验证和提交");var $form = $(form);var data = $form.Validform();// 获得Validform验证后的表单对象if (!data.check(true)) {// bool为true时则只验证不显示提示信息return false;// 返回false,不再继续执行}// 验证通过后通过config方法指定我们项目需要的ajaxPost方法// 为什么要在这个地方设置ajaxPost呢,这点很关键,我之后细致说明data.config({ajaxPost:true,// 和下面参数只有一个字符不同,注意// 定制版ajaxpost,可以让我们更方便传递适合我们项目的方法ajaxpost : {type : form.method || 'POST',url : $form.attr("action"),data : $form.serializeArray(),cache : false,success : callback,// 此处的callback就是在form表单上设置的ecAjaxDone,之后再介绍}});var _submitFn = function() {data.submitForm(true);// flag为true时,跳过验证直接提交};if (confirmMsg) {$.showConfirm(confirmMsg, _submitFn);} else {_submitFn();}return false;}
4. config配合ajaxpost可以使得一个ajax请求未结束时不再提交请求到服务端
我们可以先把下面这行代码注释掉,再来看一个form的运行方式,这样会更清晰
$.Tipmsg.p = null;// 通过验证的信息取消显示
第一次点击submit的时候,页面上提示“正在提交数据”
之后,服务端把处理信息返回到页面上。
假设服务端返回的信息返回的更慢一点,这时候我们不希望再次点击submit的信息再提交到服务端。
有了config配合ajaxpost的设置之后,当一个ajax请求未结束时,点击submit会提示“正在提交数据”
5. Validform是如何处理4的呢?
这是因为Validform为form表单设置了三种状态,分别是:
normal:未提交,posting:正在提交,posted:已成功提交过。
当点击submit提交数据(必须是ajaxpost请求的状态下)的时候,Validform的form状态改为posting,如果ajax返回success时,Validform的form状态改为posted,如果ajax返回error时,Validform的form状态改为normal。
//表单正在提交时点击提交按钮不做反应;
if(curform[0].validform_status==="posting"){return false;}var beforeSubmit=settings.beforeSubmit && settings.beforeSubmit(curform);
if(beforeSubmit===false){return false;}// ajax 提交之前设置为posting
curform[0].validform_status="posting";// ajaxPost参数必须是true
if(settings.ajaxPost || ajaxPost==="ajaxPost"){// 提示“数据提交中”
Validform.util.showmsg.call(curform,curform.data("tipmsg").p||tipmsg.p,settings.tiptype,{obj:curform,type:1,sweep:settings.tipSweep},"byajax");if(ajaxsetup.success){var temp_suc=ajaxsetup.success;ajaxsetup.success=function(data){settings.callback && settings.callback(data);curform[0].validform_ajax=null;if($.trim(data.status)==="y"){// 设置为postedcurform[0].validform_status="posted";}else{curform[0].validform_status="normal";}temp_suc(data,curform);}}if(ajaxsetup.error){var temp_err=ajaxsetup.error;ajaxsetup.error=function(data){settings.callback && settings.callback(data);// 设置normalcurform[0].validform_status="normal";curform[0].validform_ajax=null;temp_err(data,curform);} }
只要这5点技巧掌握了,那么Validform就能玩的很溜了。
看看别家程序员的程序人生吧!
手机网站form表单check神器——Validform相关推荐
- Form表单提交与Validform验证的那些事
不管是做登录.注册还是实体的添加.修改,我们都会用到表单,并且也会同时用到验证,这里结合Validform验证来详细说明form表单提交的内情.. 1. 引入文件 <link href=&quo ...
- Form表单验证神器: BootstrapValidator常见的坑,input框的value值改变二次验证不了?
BootstrapValidator表单验证是通常是用来设置form表单提交时,限制某些字段不能为空,为空时type="submit"的按钮一直提交不了,如下图 +++++++++ ...
- 黄聪: Bootstrap之Form表单验证神器: BootstrapValidator(转)
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
- php form表单验证,Validform表单验证总结篇
近期项目里用到了表单的验证,选择了Validform_v5.3.2. 先来了解一下一些基本的参数: 通用表单验证方法: Demo:$(".demoform").Validform( ...
- php form validator 下单,PHP Form表单验证:PHP form validator使_php
在php网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...
- 开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm
开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm 10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub" ...
- 表单验证之validform.js使用方法
Validform使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中(文件里这个注释 "/*==========以下部分是Va ...
- 表单ajax提交插件,jQuery Form 表单提交插件-----ajaxSubmit() 的应用
Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 一.ajaxSubmit() 介绍 立即通过AJA ...
- Form表单提交前进行JS验证的3种方式
1. 提交按钮的onclick事件中验证 <script type="text/javascript"> function check(form) { ...
最新文章
- Vue的数据双向绑定和Object.defineProperty()
- How is javascript asynchronous AND single threaded?
- leetcode 1047. Remove All Adjacent Duplicates In String | 1047. 删除字符串中的所有相邻重复项(Java)
- [android]-xml解析示便-SAX
- SRM 212 Div II Level One: YahtzeeScore
- WebApp开发技术搭配
- SQL 宝典(本人总结供学习使用)
- Log4j2的常用配置
- Centos7 Putty SSH密钥登录
- php5.0手册,tp5.0 开发手册下载|
- 新手学三菱PLC编程的常见错误总结
- 无线射频识别问答习题
- 芯力特SIT1043Q完全替代恩智浦TJA1043
- python制作会动的表情包_Python自动生产表情包
- 遗传算法--函数最值问题
- 【1000套HTML5+CSS项目实战案例】大学生期末网页作业源代码
- OSI(网络)参考模型
- shell+ftp+中文乱码_linux系统(本例为Centos)ftp上传中文名文件乱码或者显示问号解决方法 - 老牛博客...
- OPC配置DCOM解决方案
- 如何在linux下运行python程序