Home >Web Front-end >JS Tutorial >jquery validate demo 基础_jquery

jquery validate demo 基础_jquery

WBOYOriginal: 2016-05-16 15:34:381135browse

The jQuery Validate plug-in provides powerful validation functions for forms, making client-side form validation easier, while providing a large number of customization options to meet various application needs. The plugin bundles a set of useful validation methods, including URL and email validation, and provides an API for writing user-defined methods. All bundled methods use English for error messages by default and have been translated into 37 other languages.

The following is a code demo to explain jquery validate. The specific code is as follows:

<!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>

The above is the entire content of this article. The code is simple and clear, and has great reference value. I hope you all like it.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Jquery Ajax PHP MySQL implements classification list management (Part 2)_jqueryNext article：Jquery Ajax PHP MySQL implements classification list management (Part 2)_jquery

See more

jquery validate demo 基础_jquery

Related articles