JQuery 插件Validate框架的学习总结(二)

longgangbai

浏览: 7331215 次
性别:
来自: 上海

最近访客更多访客>>

sdcharles

paladin1988

ljq867

yuxiangtong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery的开发应用

jQuery 框架 JavaScript CSS UI

在页面导入相应的jquery和Validation的插件并导入并使用Validation框架

常用的限制使用如下：

相应的HTML中form中信息如下：

<form id="myform">
<label for="field">Required, only .xls and .csv files allowed</label>

   FIle:<input id="file" name="file" type="file" />
   PWD:<input id="pwd" name="pwd" type="text" />
   PWD_AGAIN:<input id="pwd_again" name ="pwd_again" type="text" />
   Birth:<input name="mydate" id="mydate" type="text" />
   Age:<input name="age" id="age" type="text" />
   Email:<input name ="myemail" id="myemail" type="text" />
   URL :<input name="myurl" id="myurl" type="text" />
<input type="submit" value="Validate!" />
</form>
在js中绑定的代码如下：

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
    
    <link rel="stylesheet" type="text/css" href="/JsLib/jquery/themes/redmond/style.css"%>" />
    <script type="text/javascript" src="JsLib/jquery/jquery-min-lastest.js"></script>
    <script type="text/javascript" src="JsLib/jquery/ui/jquery-ui-all-min-lastest.js"></script>
    <script type="text/javascript" src="JsLib/jquery/plugin/jquery.validate/jquery.validate.min.js"></script>
    <script type="text/javascript"src="/JsLib/jquery/plugin/jquery.validate/localization/messages_cn.js"></script>

    <% if (false)
       {%><script src="js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
    <% }%>
    <script type="text/javascript">
        /*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/
    </script>
    <style type="text/css">
        body
        {
            font-size:12px;
        }
        /* form中显示文字的label */
        .slabel
        {
            width:100px;
            display: -moz-inline-box;
            line-height: 1.8;
            display: inline-block;
            text-align:right;
        }
        /* 出错样式 */
        input.error, textarea.error
        {
            border: solid 1px #CD0A0A;
        }
        label.error
        {
            color:#CD0A0A;
            margin-left:5px;
        }
        /* 深红色文字 */
        .textred
        {
            color:#CD0A0A;
        }
    </style>
</head>
<body>
    <form id="commentForm" method="get" action="">
    <fieldset style="width:500px;"><legend>表单验证</legend>
        <p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label>
            <input id="cname" name="name" size="25" class="required" minlength="2" />
        </p>
        <p><label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
            <input id="cemail" name="email" size="25"/>
        </p>
        <p><label for="curl" class="slabel">网址:</label>
            <input id="curl" name="url" size="25" class="url" value="" />
        </p>
        <p><label for="ccomment" class="slabel"><em class="textred">*</em> 内容:</label>
            <textarea rows="2" id="ccomment" name="comment" cols="20" class="required" style="height:80px;"></textarea>
        </p>
        <p style="text-align:center;">
            <input class="submit" type="submit" value="提交" />
        </p>
    </fieldset>
    </form>
    <script type="text/javascript">
       /*==========用户自定义方法==========*/

       /*==========事件绑定==========*/
       $(function()
       {

});

       /*==========加载时执行的语句==========*/
       $(function()
       {
           $("#commentForm").validate(
           {
               errorClass: "error",
               submitHandler: function(form)
               {
                   //如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
                   alert("submitted!");
               },
               rules: {
                   //为name为email的控件添加两个验证方法:required()和email()
                   email: { required: true, email: true }
               },
               messages: {
                   //为name为email的控件的required()和email()验证方法设置验证失败的消息内容
                   email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"}
               }

           });
       });
    </script>
</body>
</html>

分享到：

JQuery 插件Validate框架的学习总结(三) | JQuery 插件Validate框架的学习总结

2009-06-09 14:44
浏览 4327
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论