jquery的validate表单验证

Posted 执候

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery的validate表单验证相关的知识,希望对你有一定的参考价值。

html:

<form id="reg" action="123.html">
<p class="myerror"></p>
<p>帐号:<input type="text" name="user" id="user" /></p>
<p>密码:<input type="text" name="pass" id="pass" /></p>
<p>邮编:<input type="text" name="code" id="code" /></p>
<p><input type="submit" value="提交" /></p>
</form>

css:(部分)

.valid {
  background:url(../img/reg_succ.png) no-repeat right;//图片为成功的
}

 js:

$(function () {

  //自定义验证规则
  $.validator.addMethod(
    "code",
    function(value,element){
      var tel=/^[0-9]{6}$/;
      return this.optional(element) || (tel.test(value));
    },
    "请输入正确的邮政编码!"
  );

  //插件验证
  $(\'#reg\').validate({
    submitHandler : function (form) {
      alert(\'验证成功,准备提交!\');
    },
    rules:{
      user:{
         required:true,
         minlength:6
      },
      pass:{
         required:true,
         minlength:6
      },
      code:{
        required:true,
        code:true
      }
    },
    messages:{
      user:{
        required:"用户名不为空!",
        minlength:"最小长度不少于6位"
      },
      pass:{
        required:"密码不为空!",
        minlength:"最小长度不少于6位"
      },
     code:{
       required:"邮箱不为空"
     }
   }
})
});

效果图:

 

以上是关于jquery的validate表单验证的主要内容,如果未能解决你的问题,请参考以下文章

基于jQuery的Validate表单验证

当 jquery.validate 验证表单时启用提交按钮

jQuery插件 -- 表单验证插件jquery.validate.js

jQuery Validation Engine 表单验证

jquery表单验证插件validation

jquery中的表单验证if($.sValid())是否写错了?$.valid()这样写表单木有反应,改肿么写?