jquery validate demo 基础

前端技术 2023/09/01 JavaScript

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>

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

本文地址：https://www.stayed.cn/item/2167

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案