jQuery插件 jQuery Validation基本验证1

参考慕课网视频 http://www.imooc.com/learn/385
参考菜鸟教程 http://www.runoob.com/jquery/jquery-plugin-validate.html

debug:true 只验证，不提交表单，调试时用

username验证:required,remote规则

password,confirm_password验证:equalTo规则

number1验证:number,minlength,maxlength,rangelength规则

digits1 验证：digits,min,max,range规则

url,email,date,dateISO,creditcard（信用卡号码） 规则的验证写法参考number验证

<!--引入js文件-->
<script type="text/javascript"  src="/js/jquery.min.js"></script>
<script type="text/javascript"  src="/js/jquery.validate.min.js"></script>

<!--定义表单-->
<form id="createForm" method="post" action="" >

   用户名<input id="username" name="username" type="text">

   密码 <input id="password" name="password" type="password">

   确认密码 <input id="confirm_password" name="confirm_password" type="password">

   数字<input id="numbertest" name="numbertest" type="text">

   整数<input id="digitstest" name="digitstest" type="text> 


   <input class="submit" type="submit" value="提交">

</form>

<script type="text/javascript">
    $("#createForm").validate({
        debug:true,
        rules : {
             username:{
                required : true,
                remote:{ //remote后的参数就是url,如果服务器返回true,则代表验证通过。返回false，代表验证失败
                   url:"", //要提交到后台的控制器路径
                   type:"post",  //用post方法提交
                   data:{  //除了username之外，要提交到后台的数据
                      loginTime: function(){
                         return +new Date;
                       } 
                   }
                }
            },
            password:{
                required: true,
                minlength: 5,                                               
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password" //选择器的值
            },
            numbertest:{
                number:true,                
                minlength: 5,
                maxlength: 10,
                //rangelength:[5,10]                            
            },
            digitstest:{
                digits: true,
                min: 5,
                max: 10,
                //range:[5,10]                              
            },
        },
        messages : {
             username:{
                required : "请输入用户名",
                remote:"用户名不存在"
            }, 
            password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母",            
            },
            confirm_password: {
                required: "请输入密码",
                minlength: "密码长度不能小于 5 个字母",
                equalTo: "两次密码输入不一致"
            },
            numbertest: {
                number: "请输入数字，包括（整数，负数，小数）",
                minlength: "长度不能小于 5 个字母",
                maxlength: "长度不能大于于 10 个字母",
                // rangelength:jQuery.validator.format("长度应该在{0}~{1}位")
            },
            digitstest: {
                digits: "请输入整数",
                min: "不能小于5",
                max: "不能大于10",
              //  range:jQuery.validator.format("请输入{0}~{1}的整数")   
            },
        },
        /*验证成功后提交表单*/
        submitHandler : function(form) {
            alert("提交表单");
        }
    });
</script>

rules里的uername是和input的name属性同名，而不是id属性

remote验证

rules : {
     username:{
        required : true,
        remote: "/user/getuser",/*参数就是url,如果服务器返回true,则代表验证通过。返回false，代表验证失败*/
    },
},

+new Date 的意思是：取Date.getTime()并返回 +把字符转为数字