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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
Vue中keep-alive组件的深入理解
Aug 23 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP反射基础知识回顾
2020/09/10 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
python求素数示例分享
2014/02/16 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
详谈python read readline readlines的区别
2017/09/22 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
Python使用微信接入图灵机器人过程解析
2019/11/04 Python
浅析python内置模块collections
2019/11/15 Python
十佳青年个人事迹材料
2014/01/28 职场文书
应急管理培训方案
2014/06/12 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2014四风问题对照检查材料范文
2014/09/15 职场文书
自我查摆剖析材料
2014/10/11 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
2014年网管工作总结
2014/12/11 职场文书
护士求职简历自我评价
2015/03/10 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS