码迷,mamicode.com
首页 > Web开发 > 详细

jQuery验证插件使用初步

时间:2015-03-02 11:01:37      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:

validate是一款优秀的表单验证插件,其初步使用方法如下:

(1)前台页面代码:

<form id="form1" runat="server">
       <div class="divFrame">
         <div class="divTitle">
              请输入下列资料
         </div>
         <div class="divContent">
              <div>
              用户名:<br />
              <asp:TextBox ID="txtUsername" runat="server"></asp:TextBox>
              *<br />
              <span></span>
              </div>
              <div>
              邮箱:<br />
             <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
              *<br />
              <span></span>
              </div>
         </div>
         <div class="divBtn">
             <asp:Button ID="Button1" runat="server" Text="提交" />
         </div>
     </div>
    </form>

(2)脚本代码:

    <script type="text/javascript" src="Scripts/jquery-1.4.2.js">
    </script>
    <script type="text/javascript" src="Scripts/jquery.validate.js">
    </script>
    <script type="text/javascript" src="Scripts/jquery.validate.messages_cn.js">
    </script>

    <script type="text/javascript">
        $(function () {
            $("#form1").validate(
              {
                  /*自定义验证规则*/
                  rules: {
                      txtUsername: { required: true, minlength: 6 },
                      txtEmail: { required: true, email: true }
                  },
                  /*错误提示位置*/
                  errorPlacement: function (error, element) {
                      error.appendTo(element.siblings("span"));
                  }
              }
            );
        })
    </script>

jquery.validate.messages_cn.js用于将提示信息用中文显示。写验证规则时请注意,用控件的id属性与规则进行关联

jQuery验证插件使用初步

标签:

原文地址:http://www.cnblogs.com/zhouhb/p/4307979.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!