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:"邮箱不为空"
     }
   }
})
});

效果图：

 

转载于:https://www.cnblogs.com/zhihou/p/7760582.html