Validform.js 学习笔记

Validform.js 学习笔记

资源

• 点我访问官网
• 点我访问Github
• 点我下载jQuery

说明

• Validform功能强大，用法简单，官网列举了说明、demo和文档，开发者可以根据demo找到自己需要的
• 这次示例，主要实现了以下一个需求：
  
  • form表单
  • 表单字段校验
  • 点击按钮，不提交表单，而是发送ajax请求

开门见山，直接上代码

准备

• 点我下载Validform库

• 导入必须的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.0div>

解析

• 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) {
  
          }
      });

  效果图

  • 页面初始化
    
  • 校验中
    
  • 校验通过