手机端的商城项目已经上线了很久，但一直留有令人耿耿于怀的问题——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; }
