jquery 検証デモ基础_jquery-jsチュートリアル-php.cn

jquery 検証デモ基础_jquery

WBOY

リリース： 2016-05-16 15:34:38

オリジナル

1134 人が閲覧しました

jQuery Validate プラグインは、フォームの強力な検証機能を提供し、クライアント側のフォーム検証を容易にすると同時に、さまざまなアプリケーションのニーズを満たす多数のカスタマイズオプションを提供します。このプラグインには、URL や電子メール検証などの一連の便利な検証メソッドがバンドルされており、ユーザー定義メソッドを作成するための API が提供されます。バンドルされているすべてのメソッドでは、デフォルトでエラーメッセージに英語が使用され、他の 37 言語に翻訳されています。

以下は 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>

ログイン後にコピー

上記はこの記事の全内容です。コードはシンプルで明確なので、皆さんに気に入っていただけると幸いです。