jquery mengesahkan demo 基础_jquery-tutorial js-php.cn

jquery mengesahkan demo 基础_jquery

WBOY

Lepaskan： 2016-05-16 15:34:38

asal

1134 orang telah melayarinya

Pemalam jQuery Validate menyediakan fungsi pengesahan yang berkuasa untuk borang, menjadikan pengesahan borang sebelah pelanggan lebih mudah, sambil menyediakan sejumlah besar pilihan penyesuaian untuk memenuhi pelbagai keperluan aplikasi. Pemalam ini menggabungkan satu set kaedah pengesahan yang berguna, termasuk URL dan pengesahan e-mel, dan menyediakan API untuk menulis kaedah yang ditentukan pengguna. Semua kaedah yang digabungkan menggunakan bahasa Inggeris untuk mesej ralat secara lalai dan telah diterjemahkan ke dalam 37 bahasa lain.

Berikut ialah demo kod untuk menerangkan pengesahan jquery Kod khusus adalah seperti berikut:

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

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini. Kod ini mudah dan jelas, dan mempunyai nilai rujukan yang hebat.