手机端的商城项目已经上线了很久，但一直留有令人耿耿于怀的问题——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"){
// 设置为posted
curform[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);
// 设置normal
curform[0].validform_status="normal";
curform[0].validform_ajax=null;
temp_err(data,curform);
}
}只要这5点技巧掌握了，那么Validform就能玩的很溜了。
看看别家程序员的程序人生吧！
