zoukankan      html  css  js  c++  java
  • jQuery验证插件使用初步

    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属性与规则进行关联

  • 相关阅读:
    CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并
    html之css选择器学习
    html5常见新增标签
    mysql之数据备份与恢复
    mysql之用户权限管理
    mysql之用户管理
    mysql之全球化和本地化:字符集、校对集、中文编码问题
    Sublime Text 3 安装与配置
    CSS 自适应
    php 验证码代码
  • 原文地址:https://www.cnblogs.com/zhouhb/p/4307979.html
Copyright © 2011-2022 走看看