您的位置: 首页  >  IT文章  >  前端 jquery-validate表单验证插件

前端 jquery-validate表单验证插件

分类: IT文章 • 2024-01-18 14:37:36

jquery-validate 插件

作用：表单校验

一般写法：直接写到表单的数据输入的地方

 1 <form id="loginForm" name='f' action='/auth/login' method='POST'>
 2     <div class="el-form-item">
 3         <input type="text" name='username' id="username" placeholder="用户名" class="el-input" required>
 4     </div>
 5     <div class="el-form-item">
 6         <input type="password" name='password' id="password" placeholder="密码" class="el-input" required>
 7     </div>
 8     <div class="login-btn">
 9         <button type="submit" class="el-button">登录</button>
10     </div>
11 </form>

required表示必填项，每次输入框失去焦点或者触发keyup事件时都会进行校验。ps：失去焦点属性  onblur="a();"

进阶写法（推荐）：

将校验规则统一写在js里，这样规则和提示可以一一对应起来。

html:

 1 <form id="loginForm" name='f' action='/auth/login' method='POST'>
 2     <div class="el-form-item">
 3         <input type="text" name='username' id="username" placeholder="用户名" class="el-input">
 4     </div>
 5     <div class="el-form-item">
 6         <input type="password" name='password' id="password" placeholder="密码" class="el-input">
 7     </div>
 8     <div class="login-btn">
 9         <button type="submit" class="el-button">登录</button>
10     </div>
11 </form>

js:

 1 $("#loginForm").validate({
 2     rules:{
 3         username:"required",
 4         password:"required",
 5     },
 6     messages:{
 7         username:"请输入您的用户名",
 8         password:"请输入您的密码",
 9     }
10 });

rules里面常用的验证方法有：

　　1、required：必填。

　　2、minlength(length)、maxlength(length)、rangelength(range)：设置最小长度、最大长度和长度范围[min,max]。

　　3、min(value)、max(value)、range(range)：设置最小值、最大值和值的范围。

　　4、email()：验证电子邮箱的格式。

　　5、url()：验证url格式。

　　6、date()：验证日期格式。

　　7、number()：验证十进制数字。

　　8、digits()；验证整数。

　　9、equalTo(other)：验证两个输入框的内容是否相同。

错误信息

　　默认情况在校验失败时会创建calss为error的label标签存放错误提示信息，并放在当前校验控件的后面，即

error.appendTo(element.parent());

　　如果要自定义显示位置的话可以使用 errorPlacement：callBack修改

   errorPlacement: function(error, element) {  
       //error为校验失败创建的信息提示标签，element为当前校验控件  
   }
  • errorClass 可以指定标签类名。
  • errorElement 可以指定标签类型。
  • errorLabelContainer 可以把错题信息统一放在一个容器里。
  • wrapper 用什么标签再把上边的 errorELement 包起来。
  • 关于样式的修改，校验失败当前校验控件也会添加error类名，所以可以定义input.error和label.error的样式。

校验成功信息显示：

　　校验成功可以设置success:"className"来设置样式，也可以在success后接一个函数为校验成功后的操作。

 1      $("#loginForm").validate({
 2         rules:{
 3             username:"required",
 4             password:"required",
 5         },
 6         messages:{
 7             username:"请输入您的用户名",
 8             password:"请输入您的密码",
 9         }
10          success: "valid"
11     });

添加自定义校验信息：

　　使用addMethod(name,method,message)添加自定义校验，三个参数分别为：自定义校验的名称、方法、提示信息。在 additional-methods.js 文件中存在一些扩展的自定义校验方法，如notEqualTo（不同于）等。

   jQuery.validator.addMethod( "notEqualTo", function( value, element, param ) {
       return this.optional(element) || !$.validator.methods.equalTo.call( this, value, element, param );
   }, "Please enter a different value, values must not be the same." );
  • method的三个参数分别为： 校验控件中的value值、校验控件元素、调用此校验方法中的参数（如equalTo("#newPassword")，param为“#newPassword”）。
  • this.optional(element)用于表单控件的值不为空时才触发验证。当表单的值为空时，this.optional(element) == true，即可以不填但是格式不能错的场景。
  • method返回值true为验证成功，false为验证失败。

使用普通按钮代替submit提交

很多时候我们提交表单并不是用的form形式，而是ajax，这时候就不能用submit来触发了。
validator()会返回一个对象，这个对象下的form()方法可以验证 form 返回成功还是失败。

 1 function validform(){
 2         return $("#changePasswordForm").validate({
 3             rules:{
 4                 oldPassword:"required",
 5                 newPassword:{
 6                     required:true,
 7                     notEqualTo:"#oldPassword"
 8                 },
 9                 newPassword2:{
10                     required:true,
11                     equalTo:"#newPassword"
12                 },
13             },
14             messages:{
15                 oldPassword:"原密码不能为空",
16                 newPassword:{
17                     required:"新密码不能为空",
18                     notEqualTo:"新密码不能与原密码重复"
19                 },
20                 newPassword2:{
21                     required:"请确认新密码",
22                     equalTo:"两次密码输入不一致"
23                 },
24             }
25         });
26     }
27     //注册表单验证
28     $(validform());
29 
30     //点击按钮事件
31     $("#submitBtn").click(function(){
32         if (validform().form()) {
33             //请求ajax
34             ajaxSubmit();
35         }else{}
36     });

ps：

  • 有时候会遇到form表单中按钮点击时自动执行表单提交操作的问题，或者点击form中的按钮请求ajax，可是自动在url后拼了一段奇怪的字符串导致请求status为cancel。
  • 原因是没有给button按钮规定 type 属性。
  • button按钮如果没有指定type属性的话，Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

相关推荐