JQuery插件-Validate

JQuery插件的使用

1Query插件，就是基于jQuery函数库扩展的js函数库

官方插件库地址 https://plugins.jquery.com/

2.1 jQuery验证插件下载

插件地址：https://plugins.jquery.com/validation

2.2 jQuery验证插件作用

用于表单数据提交前的校验（长度、格式、一致性…）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dHrjPzsC-1594818083756)(imgs/1594777545826.png)]

2.3 jQuery验证插件的使用

• 在需要进行表单校验的HTML文档中引入jquery及validate函数库

  <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
  <script type="text/javascript" src="js/jquery.validate.min.js" ></script>
  <script type="text/javascript">
  
  </script>
  

• 因为validate库是对表单数据进行校验，所以先在HTML文档中创建一个表单

  <form action="" method="post" id="myForm">
      <table style="width: 500px;" align="center">
          <caption>用户注册</caption>
  
          <tr>
              <td class="td1" width="100">帐号</td>
              <td><input type="text" name="userName"/></td>
          </tr>
          <tr>
              <td class="td1">密码</td>
              <td><input type="text" name="userPwd" id="userPwd" required/></td>
          </tr>
          <tr>
              <td class="td1">确认密码</td>
              <td><input type="text" name="rePwd"/></td>
          </tr>
          <tr>
              <td class="td1">邮箱</td>
              <td><input type="text" name="email" /></td>
          </tr>
          <tr>
              <td class="td1">年龄</td>
              <td><input type="text" name="userAge"/></td>
          </tr>
          <tr>
              <td class="td1"></td>
              <td><input type="submit" value="提交注册"/></td>
          </tr>
      </table>
  </form>
  

• 表单校验

  <script type="text/javascript">
      $("#myForm").validate({
      rules:{
          userName:{required:true,minlength:6,maxlength:20},
          userPwd:{required:true,minlength:8,maxlength:16},
          rePwd:{required:true,equalTo:"#userPwd"},
          email:{required:true,email:true},
          userAge:{required:true,number:true,max:30,min:6,digits:true}
  
      },
      messages:{
          userName:{required:"请输入帐号",minlength:"帐号长度至少为6个字符",maxlength:"帐号长度最多20个字符"},
          userPwd:{required:"请输入密码",minlength:"密码长度至少为8个字符",maxlength:"密码长度最多16个字符"}
      }
  });
  </script>
  

• 修改提示信息样式

  label.error{
      color:red; 
      font-size: 13px;
  }
  

• 内置校验规则

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vrjrrcpo-1594818083764)(imgs/1594781886947.png)]

  font-size: 13px;
  

  }

• 内置校验规则

  [外链图片转存中…(img-Vrjrrcpo-1594818083764)]