jquery validate demo 基础

175 阅读 0 评论 116 点赞

我是靠谱客的博主壮观星月，最近开发中收集的这篇文章主要介绍jquery validate demo 基础，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

下面通过一段代码demo给大家讲解jquery validate ，具体代码如下所示：

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
 <script type="text/javascript" src="js/jquery.validate-1.14.0.js"></script>
 <script type="text/javascript">
 $().ready(function() {
  var validate= $("#signupForm").validate({
    rules: {
     firstname: "required",
     email: {
     required: true,
     email: true
     },
     password: {
     required: true,
     minlength: 5
     },
     confirm_password: {
     required: true,
     minlength: 5,
     equalTo: "#password"
     }
    },
    messages: {
     firstname: "请输入姓名",
     email: {
     required: "请输入Email地址",
     email: "请输入正确的email地址"
     },
     password: {
     required: "请输入密码",
     minlength: "密码不能小于{0}个字 符"
     },
      confirm_password: {
     required: "确认密码",
     minlength: "确认密码不能小于5个字符",
     equalTo: "两次输入密码不一致不一致"
    }
   },
   //把错误信息放到一处处理与 errorPlacement 函数连用
   groups:{
    login:"firstname email password confirm_password"
   },
   errorPlacement:function(error,element){
    error.insertBefore("#error_info"); 
   },
   //提交表单后焦点在第一个错误表单内
   focusInvalid:true,
   //指定错误提示的css类名
   errorClass:"error_info",
   //指定验证通过的css类名
   validClass:"success_info",
   //验证通过提交表单
   submitHandler:function(form){
    console.info("提交表单"+$(form).serialize());
   },
   invalidHandler:function(event,validator){
    console.info("表单错误"+validate.numberOfInvalids());
   },
   // 取消某个元素的校验
   ignore:"#firstname",
   onfocusout:function(){
    return false;
   }
  });
  $("#check").click(function(){
   var flag1=$("#signupForm").valid();//检查表单是否有效
   var flag2=$("#firstname").rules();//查询元素的校验规则
   var flag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则
   var flag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则
   var flag5=validate.form();//验证表单是否有效
   var flag6=validate.element("#firstname");//验证表单某个元素是否有效
   validate.resetForm();//恢复表单原来的状态
   var flag7=validate.numberOfInvalids();//获得错误元素个数
   console.info(flag7);
  });
  //针对某个元素显示特定的提示信息
  validate.showErrors({
   firstname:"ERROR"
  });  
});
 </script>
</head>
<body>
 <form id="signupForm" method="get" action="">
  <p id="error_info">
   <label for="firstname">Firstname</label>
   <input id="firstname" name="firstname" />
  </p>
  <p>
   <label for="email">E-Mail</label>
   <input id="email" name="email" />
  </p>
  <p>
   <label for="password">Password</label>
   <input id="password" name="password" type="password" />
  </p>
  <p>
   <label for="confirm_password">确认密码</label>
   <input id="confirm_password" name="confirm_password" type="password" />
  </p>
  <p>
   <input class="submit" type="submit" value="Submit"/>
  </p>
  <p>
   <input class="c" type="button" value="检查表单是否有效" id="check"/>
  </p>
</form>
</body>
</html>

以上就是本文的全部内容，代码简单明了，非常具有参考借鉴价值，希望大家喜欢。