表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

一、官网下载地址：http://plugins.jquery.com/validate/

二、用法

1.在页面上进行引用

<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/jquery.validate.js"></script>

2.写验证规则（标红的"myForm"是要提交表单的ID名称，剩下的标红字体则对应的是需要验证文本框的name属性名称）

     $(function () {
         //验证规则
         $('#myForm').validate({
             debug: true,
             onkeyup: null,
             rules: {
                 university: {
                     required:true
                 },
                 age: {
                     required: true,
                     number:true
                 },
                 email: {
                     required: true,
                     email:true
                 }
             },
             messages: {
                 university: {
                     required:"请输入学校名称！"
                 },
                 age: {
                     required: "请输入年龄！",
                     number:"年龄必须是数字！"
                 },
                 email: {
                     required: "请输入邮箱",
                     email:"请输入邮箱格式"
                 }
             }
         })
     })

3.验证之后的操作

实现效果：点击提交------进行验证---验证成功（进行下一步的操作）

a.方法一：为提交按钮绑定点击事件（$('#myForm').valid()方法来验证表单是否验证成功，返回布尔值）

        $('#submitBtn').on('click', function () {
            //获取表单验证状态
            var isValidate = $('#myForm').valid();
            if(isValidate)
            {
                alert("验证成功");
            }
        })

按钮的html代码如下：

        <p><button id="submitBtn" type="button" value="提交">提交</button></p>

b.方法二：通过设置默认属性，来设置验证后运行的函数

    $.validator.setDefaults({
        submitHandler: function () {
            alert("验证成功");
        }
    })

其中要将提交按钮设置为submit类型

        <p><button id="submitBtn" type="submit" value="提交">提交</button></p>

4.页面效果

只需要加上如下样式即可：

 <style>
 /*验证错误样式*/
     input.error {
         border: 1px solid red;
     }
     label.error {
     color: red;
     margin-left: 5px;
 }
 </style>