jquery validate demo 基础

作者：bea

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。下面通过一段代码demo给大家讲解jquery validate ，具体代码如下所示： <!doctype html><html lan

下面通过一段代码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>

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

有用 | 无用

jquery validate demo 基础

猜你喜欢

您可能感兴趣的文章: