jquery validate验证插件的应用

来源:互联网 发布:三星手机未网络上注册 编辑:程序博客网 时间:2024/05/21 15:40

由于开发的节奏太快了,根本没有时间去学习写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: "请输入正确的邮箱格式",}});  });



原创粉丝点击