Validform.js 学习笔记
资源
说明
- Validform功能强大,用法简单,官网列举了说明、demo和文档,开发者可以根据demo找到自己需要的
- 这次示例,主要实现了以下一个需求:
- form表单
- 表单字段校验
- 点击按钮,不提交表单,而是发送
ajax
请求
开门见山,直接上代码
准备
- 点我下载Validform库
导入必须的js库
<!--import js--> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="../js/Validform_v5.3.2.js"></script>
前端语法规则
<!-- -->
<input type="text" id="txfVersionCode" name="txfVersionCode" class="input" placeholder="请输入versionCode" datatype="reg_version" nullmsg="versionCode不能为空!" errormsg="格式不正确!(e.g, 1.0.0)" sucmsg="小版本号格式正确">
<div class="Validform_checktip">APP版本号,e.g, 1.0.0</div>
解析
- datatype:数据校验规则。Validform本身提供了大概10种规则,如果不满足条件,开发者可以自定义,比如上述代码中,自定义的规则reg_version
- nullmsg: 控件为空时,错误提示
- errormsg:控件中的值不符合校验规则时,错误提示
- sucmsg:控件中的值校验成功时,信息提示
- class=”Validform_checktip”:Validform内置的样式(
style.css
),开发者可以自行修改
.Validform_checktip{
margin-left:8px;
line-height:30px;
height:30px;
overflow:hidden;
color:#999;
font-size:12px;
/* add by cy */
display: inline-block;
vertical-align: middle;
}
初始化
// 各参数,官方文档中有详细的说明
var myForm = $(".form").Validform({
btnSubmit: "#btnSubmit",
tiptype:4, // 4: ajax提交,请求结束后,不会出现弹框;3:ajax提交,请求结束后,会出现弹框!
showAllError:false,
ajaxPost:true,
datatype:{ // 自定义校验规则
"reg_num": /^\d{7,}$/,
"reg_version": /^\d{1,2}.\d{1,2}.\d{1,2}$/,
}
});
点击按钮,发送ajax请求
$("#btnSubmit").click(function () {
// 校验用户输入
var versionCode = $("#txfVersionCode").val();
// ……
// 这是重点!
myForm.config({
callback:function (curform) {
$.ajax({
url:"/app/upgrade",
type:"post",
dataType:"json",
data:{"versionCode":versionCode},
context:document.body,
success:function (data) {
console.log(data);
if (data.statusCode == 200) {
console.log("请求成功");
alert("升级请求成功!");
// 刷新页面
location.reload(true);
} else {
alert("升级请求成功,升级失败!");
console.log("升级请求成功,升级失败");
}
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
alert("升级请求失败!");
console.log("textStatus: " + textStatus + " | " + "errorThrown: " + errorThrown);
}
});
return true;
}
});
});
小技巧
- 如果不想显示验证成功的提示文本,只想保留成功的对号图标,则需要设置
sucmsg=" "
,注意,这里不是空字符串! datatype完全可以自定义
如果想验证版本号,如:x.y.z,则可以使用正则:
datatype:{ // 自定义校验规则 "reg_version": /^\d{1,2}.\d{1,2}.\d{1,2}$/, }
如果在myForm.config()里面直接写请求,则第一次点击按钮,不会发送请求,再次点击则会,不知道为什么,正在探索,,,有问题的代码演示:
// 有问题的代码演示!!! myForm.config({ url:"/app/upgrade", ajaxpost:{ data:{"appId":appId, "versionCode":versionCode, "versionName":versionName, "updateMessage":updateMessage, "downloadUrl":downloadUrl }, success:function (data,obj) { console.log(data); if (data.statusCode == 200) { console.log("请求成功"); alert("升级请求成功!"); // 刷新页面 location.reload(true); } else { alert("升级请求成功,升级失败!"); console.log("升级请求成功,升级失败"); } }, error:function (data,obj) { alert("升级请求失败!"); console.log("status: " + data.status + " | " + "statusText: " + data.statusText + " | " + "responseText: " + data.responseText); } }, callback:function (curform) { } });
效果图
- 页面初始化
- 校验中
- 校验通过
- 页面初始化