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 jQuery插件练习
Dec 24 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
jquery 笔记 事件
Nov 02 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
如何编写高质量JS代码
Dec 28 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
js注入 黑客之路必备!
Sep 14 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 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/02 无线电
PHP 压缩文件夹的类代码
2009/11/05 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
2016/11/05 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python实现动态数组的示例代码
2019/07/15 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
Python如何实现动态数组
2019/11/02 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
深入了解python列表(LIST)
2020/06/08 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
营销与策划应届生求职信
2013/11/04 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
MySQL系列之二 多实例配置
2021/07/02 MySQL
dubbo服务整合zipkin详解
2021/07/26 Java/Android