jquery.validate使用攻略 第二部

我来详细讲解一下 “jquery.validate使用攻略 第二部”的完整攻略，步骤如下：

一、准备工作

1. 下载 jquery.validate.js 插件，并引入到项目中。
2. 引入依赖的库文件，如 jquery 库文件。

二、基本使用

1. 引入 jquery.validate.js 插件后，在需要验证的表单元素上添加验证规则，如下：

```html

```

javascript
$(function() {
$("#myForm").validate({
rules: {
username: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirmPassword: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
username: "请输入用户名",
email: {
required: "请输入邮箱地址",
email: "请输入正确的邮箱地址"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 6 个字符"
},
confirmPassword: {
required: "请输入确认密码",
minlength: "确认密码长度不能小于 6 个字符",
equalTo: "两次输入的密码不一致"
}
}
});
});

1. 上面的代码中，我们为表单元素添加了不同的验证规则，如 required（必填）、email（邮箱格式）、minlength（最小长度）、equalTo（两次输入必须相同）等等。

通过 messages 属性，还可以自定义各个表单元素验证未通过时显示的错误提示信息。

1. 当表单元素验证未通过时，jquery.validate.js 会自动添加样式和提示信息。我们可以按照自己的需求自定义这些样式和提示信息。

参考代码：

```css
/ 自定义错误提示样式 /
label.error {
color: red;
position: absolute;
top: 0;
right: -60px;
font-size: 12px;
}

/ 自定义错误提示图标 /
.error {
border-color: red;
}

.valid {
}
```

三、示例说明

示例一：国际化支持

1. 在头部引入 i18n 插件：

```html

```

1. 手动设置文本内容为中文：

javascript
$(function() {
$("#myForm").validate({
lang: "zh",
rules: {
username: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirmPassword: {
required: true,
minlength: 6,
equalTo: "#password"
}
},
messages: {
username: "请输入用户名",
email: {
required: "请输入邮箱地址",
email: "请输入正确的邮箱地址"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 6 个字符"
},
confirmPassword: {
required: "请输入确认密码",
minlength: "确认密码长度不能小于 6 个字符",
equalTo: "两次输入的密码不一致"
}
}
});
});

示例二：去掉默认的验证提示信息

在某些场景下，我们需要自己定制验证失败时需要展示的内容，而默认的 jquery.validate.js 提供的内容无法满足要求。此时，我们可以使用 showErrors() 函数在验证过程中获取所有的错误信息，并手动将其展示到页面上。

参考代码：

var validator = $("#myForm").validate({
  rules: {
    name: {
      minlength: 2,
      required: true
    },
    age: {
      minlength: 2,
      required: true
    },
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "请输入一个至少包含两个字符的用户名",
    age: {
      required: "请输入年龄",
      minlength: "年龄必须为两位数"
    },
    email: "请输入一个有效的电子邮件地址"
  },
  invalidHandler: function(event, validator) {
    // 'this' refers to the form
    var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors === 1
        ? '请检查必填项是否都已填写。'
        : '请检查下列 ' + errors + ' 项必填项是否都已填写。';
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

$("form").submit(function() {
  if (validator.form()) {
    return true;
  } else {
    return false;
  }
});

在上面的代码中，我们通过 invalidHandler() 方法，自定义了错误处理事件，这个方法会在 jquery.validate.js 在验证过程中遇到错误时被调用，我们可以在这个方法中获取到所有的错误信息，然后手动将其展示到页面上。

以上就是 “jquery.validate使用攻略 第二部”的完整攻略，希望对你有所帮助。