jQuery validate学习笔记

目前手头上正在做的一个项目是关于微信服务号的，所以这个validate验证基于WEUI样式库的。

导入js库

使用bootstrap提供的cdn引入js库和css库；

<link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.js"></script>

使用方式

方式一：将校验规则写在控件中

<div class="weui-cell">
    <div class="weui-cell__hd"><label for="firstname" class="weui-label">名字</label></div>
    <div class="weui-cell__bd">
        <input id="firstname" name="firstname" maxlength="10" minlength="2" class="weui-input" type="text">
    </div>
</div>

方式二：将校验方法写在js中

rules:{
    firstname:"required",
    lastname:"required",
    username:{
    required:true,
    minlength:2,
    maxlength:10
    }
}

具体使用介绍

html代码

 <form action="" method="" id="commentForm">
    <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="firstname" class="weui-label">名字</label></div>
                <div class="weui-cell__bd">
                    <input id="firstname" name="firstname" maxlength="10" minlength="2" class="weui-input" type="text">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="lastname" class="weui-label">姓氏</label>
                </div>
                <div class="weui-cell__bd">
                    <input name="lastname" id="lastname" class="weui-input"  type="text">
                </div>
            </div>

            <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label for="username" class="weui-label">用户名</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input name="username" id="username" class="weui-input"  type="text">
                    </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="password" class="weui-label">密码</label>
                </div>
                <div class="weui-cell__bd">
                    <input name="password" id="password" class="weui-input"  type="text">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="confirm_password" class="weui-label">验证密码</label>
                </div>
                <div class="weui-cell__bd">
                    <input name="confirm_password" id="confirm_password" class="weui-input"  type="text">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label for="email" class="weui-label">Email</label>
                </div>
                <div class="weui-cell__bd">
                    <input name="email" id="email" class="weui-input"  type="email">
                </div>
            </div>
            <label for="agree" class="weui-agree">
                    <input name="agree" id="agree" type="checkbox" class="weui-agree__checkbox">
                    <span class="weui-agree__text">
                        阅读并同意<a href="javascript:void(0);">《相关条款》</a>
                    </span>
            </label>
            <label for="newsletter" class="weui-agree">
                    <input name="newsletter" id="newsletter" type="checkbox" class="weui-agree__checkbox">
                    <span class="weui-agree__text">随便你勾选不</span>
            </label>
            <h4>至少选择两个</h4>
            <div>
                <label for="topic_marketflash" class="weui-agree">
                        <input name="topic[]" id="topic_marketflash" type="checkbox" value="diyige" class="weui-agree__checkbox">
                        <span class="weui-agree__text">苹果</span>
                </label>
                <label for="topic_marketflash2" class="weui-agree">
                        <input name="topic[]" id="topic_marketflash2" type="checkbox" value="1" class="weui-agree__checkbox">
                        <span class="weui-agree__text">梨</span>
                </label>
                <label for="topic_marketflash3" class="weui-agree">
                        <input name="topic[]" id="topic_marketflash3" type="checkbox"  value="1" class="weui-agree__checkbox">
                        <span class="weui-agree__text">香蕉</span>
                </label>
                <label for="topic_marketflash4" class="weui-agree">
                        <input name="topic[]" id="topic_marketflash4" type="checkbox"   value="1" class="weui-agree__checkbox">
                        <span class="weui-agree__text">西瓜</span>
                </label>
            </div>

        </div>
        <input type="submit" value="submit提交">
        <input type="button" onclick="savedate()" value="ajax提交">
        <button id="test">click me</button>
</form>

style样式（报错提示）

  input.error { border: 1px solid red; }
label.error {
    background:url("../image/page/unchecked.gif") no-repeat 0px 0px;
    padding-left: 16px;
    padding-bottom: 2px;
    font-size: 14px;
    color: #EA5200;
}
label.checked {
background:url("../image/page/checked.gif") no-repeat 0px 0px;
}

js代码

$("#test").bind("click",test())
  function test(){
      var a = $("form").serializeArray();
          var objparm = new Object();
          for(var i =0;i<a.length;i++){
              objparm[a[i].name]=a[i].value;
          }
          console.log(objparm);
  }
  $.validator.setDefaults({
      submitHandler:function(){
          alert("submit提交事件成功") ;
          //form.submit();//submit提交
          //$(form).savedate();//ajax提交

      }
  });
  $(function(){
      $("#commentForm").validate({//校验规则写在js代码中
          // 在键盘按下并释放及提交后验证提交表单
         // ignore: ".ignore",//忽略验证的的input，但未生效
          errorPlacement:function(error,element){//更改错误信息显示的位置
              $(element).closest("form").find("label[for='"+element.attr("id")+"']").append(error);
          },
          //debug:true,//只验证不提交表单(多用于调试的时候)
         // errorElement:"span", //提示的标签
          rules:{
              firstname:"required",
              lastname:"required",
              username:{
                  required:true,
                  minlength:2,
                  maxlength:10
              },
              password:{
                  required:true,
                  minlength:5
              },
              confirm_password:{
                  required:true,
                  minlength:5,
                  equalTo:"#password"
              },
              email:{
                  required:true,
                  email:true
              },
              "topic[]":{
                  required:"#newsletter:checked",
                  minlength:2
              },
              agree:{
                  required:true
              }
          },
          messages:{
              firstname: "请输入您的名字",
              lastname: "请输入您的姓氏",
              username: {
                required: "请输入用户名",
                minlength: "用户名必需由两个字母组成"
              },
              password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母"
              },
              confirm_password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母",
                equalTo: "两次密码输入不一致"
              },
              email: "请输入一个正确的邮箱",
              agree: "请接受我们的声明",
              topic: "请选择两个主题"
            }
      });
  })
  //ajax提交
  //参数设置
  function savedate(){
      //获取data方法一：
      var data = {};
      var myname = $("#cname").val();
      data["name"] = myname;
      //获取data方法二
      //获取所有的参数数组
      var paramArr = $("form").serializeArray();
      //拼接参数对象
      var paramObj =new Object();  
      for(var i = 0 , len = paramArr.length ; i < len ; i++){
          paramObj[paramArr[i].name] = paramArr[i].value;
      }
      $.ajax({
          url:"../../update",
          data: data,
          dataType:"json",
          success:function(result){
              if(result.status != 0){
                  alert(result.msg);
                  result;
              }
              alert("数据提交成功")
          },
          error:function(data,status,e){//服务器响应失败处理函数
              alert(e);
          }
      })
  }

点击submit提交后的页面效果