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

 1     $(function () {
 2         //验证规则
 3         $('#myForm').validate({
 4             debug: true,
 5             onkeyup: null,
 6             rules: {
 7                 university: {
 8                     required:true
 9                 },
10                 age: {
11                     required: true,
12                     number:true
13                 },
14                 email: {
15                     required: true,
16                     email:true
17                 }
18             },
19             messages: {
20                 university: {
21                     required:"请输入学校名称！"
22                 },
23                 age: {
24                     required: "请输入年龄！",
25                     number:"年龄必须是数字！"
26                 },
27                 email: {
28                     required: "请输入邮箱",
29                     email:"请输入邮箱格式"
30                 }
31             }
32         })
33     })

3.验证之后的操作

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

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

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.页面效果

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

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

 1 <style>
 2 /*验证错误样式*/
 3     input.error {
 4         border: 1px solid red;
 5     }
 6     label.error {
 7     color: red;
 8     margin-left: 5px;
 9 }
10 </style>

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

相关推荐