表单提交学习笔记（二）—使用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>