0
点赞
收藏
分享

微信扫一扫

Javascript知识【jQuery-validation插件】


目录

  • 💂 个人主页:​​爱吃豆的土豆​​
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦
  • 🏆人必有所执,方能有所成!
  • 🌈欢迎加入社区,福利多多哦!​​土豆社区​​
  • 🐋希望大家多多支持😘一起进步呀!

​​jQuery-validation插件​​

​​导入​​

​​校验规则​​

​​自定义回显​​

​​自定义校验规则​​

jQuery-validation插件

导入

Javascript知识【jQuery-validation插件】_jquery

轻松完成复杂表单校验。

<!--先导入jQuery,再导入validation,最后导入中文提示包      -->
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_zh.js"></script>


校验规则

需要给表单加入validate校验

<script>
   $(function () {
      $("#f1").validate();
   });
</script>


<script>
   $(function () {
      $("#f1").validate({
         rules:{
            username:{
               required:true,
               rangelength:[6,10]
            }
         }
      });
   });
</script>


Javascript知识【jQuery-validation插件】_javascript_02

<script>
   $(function () {
      $("#f1").validate({
         rules:{
            username:{
               required:true,
               rangelength:[6,10]
            },
            email:{
               email:true
            },
            birthday:{
               date:true
            },
            sal:{
               number:true
            },
            workForday:{
               range:[6,16]
            },
            pwd:{
               required:true
            },
            repwd:{
               required:true,
               equalTo:"input[name='pwd']"
            }
         }
      });
   });
</script>


校验类型

取值

描述

required

true 或 false

必填字段

email

true 或 false

邮件地址

date

true 或 false

日期,设用于通过的日期格式使用以下常用日期格式

YYYYYYYY-MM    YYYY-MM-dd

YYYY/MM/dd   YYYY/MM/dd hh:mm:ss  

YYYY-MM-dd  hh:mm:ss

dateISO

true 或 false

日期(YYYY-MM-dd)

number

true 或 false

数字(负数,小数)

digits

true 或 false

整数

minlength

填写具体数字

最小长度

maxlength

填写具体数字

最大长度

rangelength

(minL,maxL)

长度范围

min

最小值

max

最大值

range

[min,max]

值范围

equalTo

jQuery表达式

两个值相同

remote

url路径

ajax校验

url

路径

自定义回显

<script>
   $(function () {
      $("#f1").validate({
         rules:{
            username:{
               required:true,
               rangelength:[6,10]
            },
            email:{
               email:true
            },
            birthday:{
               date:true
            },
            sal:{
               number:true
            },
            workForday:{
               range:[6,16]
            },
            pwd:{
               required:true
            },
            repwd:{
               required:true,
               equalTo:"input[name='pwd']"
            }
         },
         messages:{
            username:{
               required:"小伙,这个得填呐",
               rangelength:"小伙,长度范围得是{0}~{1}之间呐"
            }
         }
      });
   });
</script>


Javascript知识【jQuery-validation插件】_前端_03

 

Javascript知识【jQuery-validation插件】_自定义_04

<form id="f1">
<label class= "errro" for="username"></label>
//在此处for=“username”会报红,是因为idea不认识该方式,不影响使用
</form>

注意:label标签必须位于当前validate的form表单之中。 

自定义校验规则

<script>
   var reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
   $(function () {
      //必须在为表单绑定校验之前,添加自定义规则
      $.validator.addMethod("idCardChecked",function (value,ele,params) {
         //1、若程序员传递true,说明程序员需要进行校验
         if(params){
            //2、就对value值进行正则校验
            //3、根据正则结果进行值返回
            return reg.test(value);
         }
         //若传递规则值不为true,说明程序员不需要进行校验,不校验直接放行
         return true;
      },"必须符合身份证的格式才行");

      $("#f1").validate({
         rules:{
            username:{
               required:true,
               rangelength:[6,10]
            },
            idCard:{
               idCardChecked:true
            }
         }
      });
   });
</script>


 

Javascript知识【jQuery-validation插件】_javascript_05

注意:该自定义校验规则 必须放置于 为表单绑定validate校验之前 

举报

相关推荐

0 条评论