jQuery validate入门 

<html>
<head>
    <meta charset="utf8"></meta>
</head>
<body>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript"  src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
    <script type="text/javascript">
    $().ready(function() {
 //$("#signupForm").validate();//不推荐
 //此种方式需要将验证规则写在html中  且如果使用 class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
 //这样的方式话  还需再添加一个jquery.metadata.js 包


 //方式2  将提示信息写入js中
 //在验证没有通过之前  插件会自动禁止提交
 $("#signupForm").validate({
     rules: {
         firstname: {
             required:true,
             remote:{
                 url:"check-name.php",
                 type:"get",
                 data:{
                     firstname:function(){
                         return $('input[name="firstname"]').val();
                     }
                 },
                 dataType:"json"
             }
         },
         email: {
             required: true,
             email: true
         },
         password: {
             required: true,
             minlength: 5
         },
         confirm_password: {
             required: true,
             minlength: 5,
             equalTo: "#password"
         }

     },
     messages: {
         firstname: {
             required:"请输入姓名",
             remote:"换一个"
         },
         email: {
             required: "请输入Email地址",
             email: "请输入正确的email地址"
         },
         password: {
             required: "请输入密码",
             minlength: jQuery.format("密码不能小于{0}个字 符")
         },
         confirm_password: {
             required: "请输入确认密码",
             minlength: "确认密码不能小于5个字符",
             equalTo: "两次输入密码不一致不一致"
         }
     }
 });
});
    </script>

    <form id="signupForm" method="get" action="coco.php">
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" class="required" />
        </p>
        <p>
            <label for="email">E-Mail</label>
            <input id="email" name="email" class="required email" />
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password" />
        </p>
        <p>
            <label for="confirm_password">确认密码</label>
            <input id="confirm_password" name="confirm_password" type="password" />
        </p>
        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </form>
</body>

</html>

check-name.php

<?php
$name=$_REQUEST['firstname'];
$valid="";
if($name=="first"){
    $valid="false";
}else if($name=="aaa"){
    $valid="false";
}else{
    $valid="true";
}
echo $valid;
?>

 

 

posted @ 2013-08-28 15:48  cart55free99  阅读(202)  评论(0)  编辑  收藏  举报