WEB开发网
开发学院网页设计JavaScript [jQuery]使用jQuery.Validate进行客户端验证(初级... 阅读

[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由

 2010-06-28 00:00:00 来源:WEB开发网   
核心提示: 在引用完基本所需的脚本后就在母版页中添加脚本来进行验证,jQuery.Validate是监控form,[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由(3),在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规

在引用完基本所需的脚本后就在母版页中添加脚本来进行验证。 

jQuery.Validate是监控form,在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则,满足才允许提交。所以需

要在jQuery(document).ready()时为form进行验证注册

具体代码如下:

<body>  
  <form id="form1" runat="server">  
    <div>    
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">    
      </asp:ContentPlaceHolder>  
    </div>  
  </form>  
  <script type="text/javascript">    
    jQuery(document).ready(function() {      
      jQuery("#<%=form1.ClientID %>").validate();    
    });  
  </script>
 </body>

到这边肯定会有人疑问了,为什么要把jQuery.Validate的代码写在页面的<body>中,这点牵扯到验证规则制定和分组验证的方法将会在中级篇和高级篇中讲解。

注册完验证监控后我们就可以开始编写具体的验证代码了,我们通过母版页建立一个子页面,在页面里放几个基本的输入框代码如下:

<%@ Page Title="员工信息管理-初级验证" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
  CodeFile="Base.aspx.cs" Inherits="_Base" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <table cellpadding="1" cellspacing="1" border="1" width="50%" align="center">
    <tr>
      <td>
        用户名
      </td>
      <td>
        <asp:TextBox ID="txtUid" runat="server" CssClass="required"></asp:TextBox>
      </td>
    </tr>
    <tr>
      <td>
        姓名
      </td>
      <td>
        <asp:TextBox ID="txtName" runat="server" CssClass="required"></asp:TextBox>
      </td>
    </tr>
    <tr>
      <td>
        年龄
      </td>
      <td>
        <asp:TextBox ID="TextBox1" runat="server" CssClass="number"></asp:TextBox>
      </td>
    </tr>
    <tr>
      <td>
        邮箱
      </td>
      <td>
        <asp:TextBox ID="TextBox2" runat="server" CssClass="email"></asp:TextBox>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <asp:Button ID="Button1" runat="server" Text="提交" />
      </td>
    </tr>
  </table>
</asp:Content>

上一页  1 2 3 4 5  下一页

Tags:jQuery 使用 jQuery

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接