jquery.validate.js 表单验证
博客专区 > cwt1357 的博客 > 博客详情
jquery.validate.js 表单验证
cwt1357 发表于2年前
jquery.validate.js 表单验证
  • 发表于 2年前
  • 阅读 18
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 表单验证的简单步骤
 <script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

表单验证第一步(添加表单验证):

 $(document).ready(function(){
  $("#form").validate({});
 });

表单验证第二步(form表单里面的dom元素添加class 或属性 提交时被验证):

<input id="username" name="username" type="text" value="" class="required">
 <input id="username" name="username" type="text" value="" maxlength="50">

   验证错误是的提示信息:

<input id="username" name="username" title="用户名必填,最大长度50" type="text" value="" class="required" maxlength="50"> >

表单验证的时候有时候会有特殊需求,如错误提示的展现方式:固定位置,弹出框,自定义位置

$(document).ready(function(){
  $("#form").validate({
  errorPlacement:callback
  });
 }); 
  function callback(error, element)  {

    error.appendTo(element.parent());//固定位置
  }
  
  function callback(error, element)  {

    tipsFloor(element,2,"red","用户名必填,最大长度50")//自定义 可弹出框
      }

表单验证添加自定义方法

$.validator.addMethod(
"rulename",
function(value,element,params){
   if(params[0] > 50) {
    return false;
  }
},
"用户名必填,最大长度50"
)

使用自定义方法

  $(document).ready(function(){
       $("#form").validate({
          rules:{
             DOMname:{
                 rulename:function() {
                     return $("#domid").val()
                 }
             }          
           }
       });
   });

表单验证通过时调用处理过程

$(document).ready(function(){
  $("#form").validate({
   submitHandler: function(form) { 
    form.submit(); 
  }
  errorPlacement:callback
  });
});  

$(document).ready(function(){
  $("#form").validate({
   submitHandler: function(form) { 
      form_sava()//ajax请求提交表单 
      return false;
   }
  errorPlacement:callback
  });
});
标签: jquery validate
共有 人打赏支持
粉丝 0
博文 23
码字总数 58502
×
cwt1357
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: