jQuery Validate基本使用方法总结

一.基于表单提交验证

首先得引入jquery和jquery-validate.js。其次既然是表单校验，首先得有一个表单，即form标签，然后由于浏览器是通过name属性来提交表单数据的，所以需要给校验的控件都加上name属性。

基于表单提交验证，按校验规则写法分为两种：规则写在表单中和规则写在js代码

第一种：规则写在表单中(不推荐)

<form class="cmxform" id="commentForm" method="get" action="formAction">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>

required属性表示必填，默认情况下在点击提交按钮的时候会触发表单校验，之后input在失焦、keyup事件的时候都会校验。

第二种：规则写在js

<form id="loginForm" name='f' action='/auth/login' method='POST'>
    <div class="el-form-item">
        <input type="text" name='username' id="username" placeholder="用户名" class="el-input">
    </div>
    <div class="el-form-item">
        <input type="password" name='password' id="password" placeholder="密码" class="el-input">
    </div>
    <div class="login-btn">
        <button type="submit" class="el-button">登录</button>
    </div>
</form>

$(function(){
    $("#loginForm").validate({
        rules: {
            username: "required",
            password: "required",
        },
        messages: {
            username: "请输入用户名",
            password: "请输入密码",
        }
    });
})

这种方式比较直观，如果表单验证成功，则自动提交表单。

 

二.基于表单验证Ajax提交

<form id="loginForm">
    <div class="el-form-item">
        <input type="text" name='username' id="username" placeholder="用户名" class="el-input">
    </div>
    <div class="el-form-item">
        <input type="password" name='password' id="password" placeholder="密码" class="el-input">
    </div>
    <div class="login-btn">
        <button id="submitBtn" type="button" class="el-button">登录</button>
    </div>
</form>

注意表单不要写 action, button类型设置button

$(function(){
    $("#loginForm").validate({
        rules: {
            username: "required",
            password: "required",
        },
        messages: {
            username: "请输入用户名",
            password: "请输入密码",
        }
    });

    $('#submitBtn').click(function(){
        $("#loginForm").validate({        
            success:"valid",
            submitHandler:function() { 
                //提交表单操作，
                $.ajax({url:'提交地址',
                        type:'POST',
                        data:$('#loginForm').serialize()
                        success:function(data){
                         //获取data信息(用户信息)，
                         //界面跳转                      
                    }
                });
            }
        })

    });
})