版权声明：本文为原创文章，未经博主允许不得转载，有问题欢迎讨论。 https://blog.csdn.net/u014696025/article/details/70919193
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) { } });效果图
- 页面初始化
- 校验中
- 校验通过
- 页面初始化
