Jquery使用(2):query.validate.js使用实例

1.效果

2.JS部分

<script type="text/javascript" src="JSStyle/js/jquery-1.2.6.pack.js"></script>
 <script type="text/javascript" src="JSStyle/js/jquery.validate.js"></script>

<script type="text/javascript" language="javascript">
    $(function() {
        $("#Button1").click(function() {
            $("#form1").validate({
                rules:
                    {
                        "userName":
                        {
                            required: true
                        },
                        "pwd":
                        {
                            required: true,
                            number: true
                        },
                        "email":
                        {
                            required: true,
                            email: true
                        }
                    },
                messages:
                    {
                        "userName":
                        {
                            required: "<strong style='color:red'>请输入用户名</strong>"

                        },
                        "pwd":
                        {
                            required: "<strong style='color:red'>请输入密码</strong>",
                            number: "<strong style='color:red'>请输入整数</strong>"
                        },
                        "email":
                        {
                            required: "请输入邮箱",
                            email: "邮箱格式不正确"
                        }
                    },
                onkeyup: false
            });
        });
    });
   
       
    </script>

3.界面

<form id="form2" runat="server">
    <table>
    <tr>
    <td>
    用户名：
    </td>
    <td>
    <input type="text" name="userName" />
    </td>
    </tr>
    <tr>
    <td>
    密码：
    </td>
    <td>
    <input type="text" name="pwd" />
    </td>
  
    <td>
    邮箱：
    </td>
    <td>
    <input type="text" name="email" />
    </td>
    </tr>
    </table>
    &nbsp;
    
    <asp:Button ID="Button1" runat="server" Text="Button" οnclick="Button1_Click" />
    </form>