前端验证，jquery.validate插件
2021-03-27 13:26
阅读：571
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
该插件是由 Jörn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。目前版本是 1.14.0。
使用：
导入 js 库
验证提示默认为英文，想要中文，需引入中文包，本地包在dist/localization/messages_zh.js
可以使用cdn
demo
1 // 在键盘按下并释放及提交后验证提交表单 2 $("#signupForm").validate({ 3 rules: { 4 firstname: "required", 5 lastname: "required", 6 username: { 7 required: true, 8 minlength: 2 9 }, 10 password: { 11 required: true, 12 minlength: 5 13 }, 14 confirm_password: { 15 required: true, 16 minlength: 5, 17 equalTo: "#password" 18 }, 19 email: { 20 required: true, 21 email: true 22 }, 23 topic: { 24 required: "#newsletter:checked", 25 minlength: 2 26 }, 27 agree: "required" 28 }, 29 messages: { 30 firstname: "请输入您的名字", 31 lastname: "请输入您的姓氏", 32 username: { 33 required: "请输入用户名", 34 minlength: "用户名必需由两个字母组成" 35 }, 36 password: { 37 required: "请输入密码", 38 minlength: "密码长度不能小于 5 个字母" 39 }, 40 confirm_password: { 41 required: "请输入密码", 42 minlength: "密码长度不能小于 5 个字母", 43 equalTo: "两次密码输入不一致" 44 }, 45 email: "请输入一个正确的邮箱", 46 agree: "请接受我们的声明", 47 topic: "请选择两个主题" 48 } 49 })
至此，一个简单的demo就完成了
总结：
- 引入js
- 看demo
- 根据需求进行修改
下一篇：网站首页蒙灰CSS样式
评论
亲，登录后才可以留言！