jquery validate验证插件的应用

由于开发的节奏太快了，根本没有时间去学习写js的输入验证，于是拿着validate验证插件。

网上资料很多，虽然目前我实现了功能，但还是不太明白或者有些混乱，以后有机会在细细研究吧

我在两个地方使用了validate，一处使使用ajax的$.ajax提交数据代码如下：

<form class="form-horizontal">
<div class="control-group">
    <label class="control-label" for="inputEmail">数字：</label>
    <div class="controls">
      <input type="hidden" id="typeId" name="lid" value="<?php echo $_GET['lid'];?>">
      <input type="text" id="inputEmail" placeholder="请输入您猜测的数字" name="lotvalue">
    </div>
  </div>

  <div class="control-group">
    <div class="controls">
     <input type="submit" class="submit" id="confirm" value="提交">
    </div>
  </div>
</form>


$.validator.setDefaults({
	   submitHandler: function() { 
			$value=$("#inputEmail").val();
			$lId=$("#typeId").val();
			$.ajax({
			type:"POST",
			url:"<?php echo $baseUrl."/index.php?r=draw/confirmLot/"?>",
			data:"lid="+$lId+"&value="+$value,
			success:function(msg){
					alert("提交成功，敬请关注开奖时间"+msg);
					$("#inputEmail").val("");
					$("#confirm").attr({"disabled":"disabled"});
				}
				});
	   },

	   rules: {  
		      lotvalue: {  
		         required: true,  
		         rangelength:[6,6],
		         number:true, 
		      },  
		   },  
		   messages: {  
		      lotvalue: {  
		         required: '您未输入数据',  
		         rangelength: '请输入一组长度等于6的数字'  
		      },   
		   }  

	   
});

需要切记的是validate插件是基于form表单的，且提交按钮的type类型必须为“submit”。

第二个地方是用form表单的post方式提交数据代码如下，注意两者代码的区别，这时候用上面的代码就没有任何反应了。很奇怪的问题。

<form class="form-horizontal fl" action="" method="post">
  <div class="control-group">
    <label class="control-label" for="inputEmail">注册邮箱</label>
    <div class="controls">
      <input type="text" id="inputEmail" name="email" placeholder="请输入您常用的邮箱">
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="inputPassword">密码</label>
    <div class="controls">
      <input type="password" name="password" id="inputPassword" placeholder="请输入您的登录密码">
    </div>
  </div>
  
   
  <div class="control-group">
    <div class="controls">
 <input type="button" class="submit" id="confirm" value="提交">
    </div>   
  </div>
  
  
</form>





  $(document).ready(function(){



	  $(".form-horizontal").validate({
			rules: {
				username: {
					required: true,
				},
				password: {
					required: true,
				},
				repassword: {
					required: true,
					equalTo: "#inputPassword"
				},
				email: {
					required: true,
					email: true
				},
				
			},
			messages: {
				username: {
					required: "请输入用户名",
				},
				password: {
					required: "请输入密码",
					
				},
				confirm_password: {
					required: "请再次重复密码",
					
					equalTo: "密码两次输入的不一致"
				},
				email: "请输入正确的邮箱格式",
			}
		});






		
	  });