jquery 검증 데모 基础_jquery-JS 튜토리얼-php.cn

jquery 검증 데모 基础_jquery

WBOY

풀어 주다： 2016-05-16 15:34:38

원래의

1135명이 탐색했습니다.

jQuery Validate 플러그인은 양식에 대한 강력한 유효성 검사 기능을 제공하여 클라이언트 측 양식 유효성 검사를 더 쉽게 만드는 동시에 다양한 애플리케이션 요구 사항을 충족하는 다양한 사용자 정의 옵션을 제공합니다. 플러그인은 URL 및 이메일 검증을 포함한 유용한 검증 방법 세트를 번들로 제공하고 사용자 정의 방법을 작성하기 위한 API를 제공합니다. 번들로 제공되는 모든 메서드는 기본적으로 오류 메시지에 영어를 사용하며 37개 다른 언어로 번역되었습니다.

다음은 jquery verify를 설명하기 위한 코드 데모입니다.

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

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 코드는 간단하고 명확하며, 참고할 가치가 매우 높습니다.