jQuery Validate表单验证入门学习


Posted in Javascript onDecember 18, 2015

本文讲述了jQuery Validate表单验证入门的基础知识,jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求,以下就是本文的全部内容,特分享给大家。

1、导入 js 库

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

2、默认校验规则

jQuery Validate表单验证入门学习

3、默认提示

messages: {
 required: "This field is required.",
 remote: "Please fix this field.",
 email: "Please enter a valid email address.",
 url: "Please enter a valid URL.",
 date: "Please enter a valid date.",
 dateISO: "Please enter a valid date (ISO).",
 dateDE: "Bitte geben Sie ein gültiges Datum ein.",
 number: "Please enter a valid number.",
 numberDE: "Bitte geben Sie eine Nummer ein.",
 digits: "Please enter only digits",
 creditcard: "Please enter a valid credit card number.",
 equalTo: "Please enter the same value again.",
 accept: "Please enter a value with a valid extension.",
 maxlength: $.validator.format("Please enter no more than {0} characters."),
 minlength: $.validator.format("Please enter at least {0} characters."),
 rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."),
 range: $.validator.format("Please enter a value between {0} and {1}."),
 max: $.validator.format("Please enter a value less than or equal to {0}."),
 min: $.validator.format("Please enter a value greater than or equal to {0}.")
},

如需要修改,可在 js 代码中加入:

jQuery.extend(jQuery.validator.messages, {
 required: "必选字段",
 remote: "请修正该字段",
 email: "请输入正确格式的电子邮件",
 url: "请输入合法的网址",
 date: "请输入合法的日期",
 dateISO: "请输入合法的日期 (ISO).",
 number: "请输入合法的数字",
 digits: "只能输入整数",
 creditcard: "请输入合法的信用卡号",
 equalTo: "请再次输入相同的值",
 accept: "请输入拥有合法后缀名的字符串",
 maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
 minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
 rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
 range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
 max: jQuery.validator.format("请输入一个最大为{0} 的值"),
 min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

推荐做法,将此文件放入 messages_cn.js 中,在页面中引入:
<script src="../js/messages_cn.js" type="text/javascript"></script>
4、使用方式
1)、将校验规则写到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {
 $("#signupForm").validate();
});


<form id="signupForm" method="get" action="">
 <p>
  <label for="firstname">Firstname</label>
  <input id="firstname" name="firstname" class="required" />
 </p>
 <p>
 <label for="email">E-Mail</label>
 <input id="email" name="email" class="required email" />
 </p>
 <p>
 <label for="password">Password</label>
 <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
 <label for="confirm_password">确认密码</label>
 <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
 <p>
  <input class="submit" type="submit" value="Submit"/>
 </p>
</form>

使用 class="{}" 的方式,必须引入包:jquery.metadata.js。
可以使用如下的方法,修改提示内容:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用 equalTo 关键字时,后面的内容必须加上引号,代码如下所示:

class="{required:true,minlength:5,equalTo:'#password'}"

2)、将校验规则写到 js 代码中

$().ready(function() {
 $("#signupForm").validate({
  rules: {
 firstname: "required",
 email: {
 required: true,
 email: true
 },
 password: {
 required: true,
 minlength: 5
 },
 confirm_password: {
 required: true,
 minlength: 5,
 equalTo: "#password"
 }
 },
  messages: {
 firstname: "请输入姓名",
 email: {
 required: "请输入Email地址",
 email: "请输入正确的email地址"
 },
 password: {
 required: "请输入密码",
 minlength: jQuery.format("密码不能小于{0}个字 符")
 },
 confirm_password: {
 required: "请输入确认密码",
 minlength: "确认密码不能小于5个字符",
 equalTo: "两次输入密码不一致不一致"
 }
 }
 });
});

messages 处,如果某个控件没有 message,将调用默认的信息

<form id="signupForm" method="get" action="">
 <p>
  <label for="firstname">Firstname</label>
  <input id="firstname" name="firstname" />
 </p>
 <p>
 <label for="email">E-Mail</label>
 <input id="email" name="email" />
 </p>
 <p>
 <label for="password">Password</label>
 <input id="password" name="password" type="password" />
 </p>
 <p>
 <label for="confirm_password">确认密码</label>
 <input id="confirm_password" name="confirm_password" type="password" />
 </p>
 <p>
  <input class="submit" type="submit" value="Submit"/>
 </p>
</form>

required:true 必须有值。
required:"#aa:checked" 表达式的值为真,则需要验证。
required:function(){} 返回为真,表示需要验证。
后边两种常用于,表单中需要同时填或不填的元素。

以上就是本文的全部内容,全部介绍了jQuery Validate表单验证入门知识,之后还有一篇针对jQuery Validate表单验证的深入学习,希望大家继续关注。

Javascript 相关文章推荐
javascript 继承实现方法
Aug 26 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
用headjs来管理和加载js 提高网站加载速度
Nov 29 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
JavaScript实用代码小技巧
Aug 23 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
jQuery定义插件的方法
Dec 18 #Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 #Javascript
jquery实现二级导航下拉菜单效果
Dec 18 #Javascript
学习jQuey中的return false
Dec 18 #Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 #Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 #Javascript
javascript实现保留两位小数的多种方法
Dec 18 #Javascript
You might like
无线电的诞生过程
2021/03/01 无线电
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
php常量详细解析
2015/10/27 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
javaScript实现滚动新闻的方法
2015/07/30 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
javascript读取文本节点方法小结
2016/12/15 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
2019/03/21 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
Python入门篇之正则表达式
2014/10/20 Python
python获得文件创建时间和修改时间的方法
2015/06/30 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python-jenkins 获取job构建信息方式
2020/05/12 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
大专应届生个人的自我评价
2013/11/21 职场文书
小学生演讲稿
2014/01/12 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年终个人总结报告
2015/03/09 职场文书
让世界充满爱观后感
2015/06/10 职场文书
画展观后感
2015/06/17 职场文书