Javascript知识【jQuery-validation插件】

💂 个人主页: 爱吃豆的土豆

🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主

💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

🏆人必有所执，方能有所成！

🌈欢迎加入社区，福利多多哦！土豆社区

🐋希望大家多多支持😘一起进步呀！

jQuery-validation插件

导入

轻松完成复杂表单校验。

<!–先导入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>

<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		路径

自定义回显

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