validate

kalllx

浏览: 62990 次
性别:
来自: 杭州

最近访客更多访客>>

nash_qiu

yamazakei

啊喔鹅咦呜鱼

ccc520

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery json XHTML PHP HTML

<!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" >
    <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<meta http-equiv="content-type" content="text/http;charset=utf-8">

    <script type="text/javascript" src="../js/jquery-min-lastest.js"></script>

    <script type="text/javascript" src="../js/plugin/validate/jquery.validate.pack.js"></script>
    <script type="text/javascript" src="../js/messages_cn.js"></script>
<script>
$(document).ready(function(){

$("#login").validate({
    rules: {
       username: {
        required: true,
remote: {
   url: "exist_User.php",     //后台处理程序
   type: "post",               //数据发送方式
   dataType: "json",           //接受数据格式
   data: {                     //要传递的数据
    username:function(){
     return $("#username").val();
    }
   }
}

       },
       email: {
        required: true,
        email: true
       },
       password: {
        required: true,
        minlength: 6
       },
       confirm_password: {
        required: true,
        minlength: 6,
        equalTo: "#password"
       }
      },
    messages: {
       username: {
        required: "<span style='color:red'> 请输入用户名</span>",
        minlength: jQuery.format("<span style='color:red'> 用户名不正确，应该在2个汉字或四个字符以上</span>")
       },
       email: {
        required: "<span style='color:red''>请输入Email地址</span>",
        email: "<span style='color:red'> 请输入正确的email地址</span>"
       },
       password: {
        required: "<span style='color:red'> 请输入密码</span>",
        minlength: jQuery.format("<span style='color:red'> 您输入的密码不正确，应该在6位或6位字符以上</span>")
       },
       confirm_password: {
        required: "<span style='color:red'>请输入确认密码</span>",
        minlength: jQuery.format("<span style='color:red'> 您输入的密码不正确，应该在6位或6位字符以上</span>"),
        equalTo: "<span class='fred'>两次输入密码不一致</span>"
       }
      }
    });

})
</script>
</head>

<body>
<form action="" method="post" id="login" name="login">
        <label>用户名:</label><input name="username" id="username" type="text" />
        <hr>
        <label>邮件地址:</label><input name="email" type="text" />
        <hr>
        <label>密   码:</label><input id="password" name="password" type="password" />
        <hr>
        <label>确认密码:</label><input name="confirm_password" type="password" />
        <hr>
        <input name="userinfosub" type="submit" value="提交" />
    </form>

</body>
</html>

</body>
</html>

<!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" >
    <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<meta http-equiv="content-type" content="text/http;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../CSS/redmond/jquery-ui-1.7.1.custom.css" />
    <script type="text/javascript" src="../js/jquery-min-lastest.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-all-min-lastest.js"></script>
    <script type="text/javascript" src="../js/plugin/validate/jquery.validate.pack.js"></script>
    <script type="text/javascript" src="../js/messages_cn.js"></script>
    <script type="text/javascript" src="../js/jquery.metadata.js"></script>



    </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>
<label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
            <input id="cemail" name="email" size="25" class="required email"/>

        <p><label for="curl" class="slabel">网址:</label>
            <input id="curl" name="url" size="25" class="required" value="" />

        <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><label for="ccomment" class="slabel"><em class="textred">*</em>mytest:</label>

<input type=”text” name="mytest" class="required telphoneValid"/>


    <p>
            <input class="submit" type="submit" value="提交" class="cancel" />
        </p>
    </fieldset>
    </form>
    <script type="text/javascript">
       /*==========用户自定义方法==========*/

       /*==========事件绑定==========*/
       $(function()
       {
jQuery.validator.addMethod("telphoneValid", function(value, element) {
    var tel = /^(130|131|132|133|134|135|136|137|138|139|150|153|157|158|159|180|187|188|189)\d{8}$/;
    return tel.test(value) || this.optional(element);
}, "请输入正确的手机号码");       });

       /*==========加载时执行的语句==========*/
       $(function()
       {
           $("#commentForm").validate(
   {
rules:
{
mytest:{email:true}
} ,
messages:
{
mytest:{required: "<span style='color:red'> 请输入密码</span>",
email:"电子邮件啊"
}
}
});
        });
    </script>
</body>
</html>