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 相关文章推荐
web css实现整站样式互相切换
Oct 29 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
JS作为值的函数用法示例
Jun 20 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
Vue组件为什么data必须是一个函数
Jun 11 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
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
背景音乐每次刷新都可以自动更换
2007/02/01 Javascript
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
js转html实体的方法
2016/09/27 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
基于jquery实现二级联动效果
2017/03/30 jQuery
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
python基础教程之元组操作使用详解
2014/03/25 Python
python Tkinter版学生管理系统
2019/02/20 Python
使用python远程操作linux过程解析
2019/12/04 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
python如何快速生成时间戳
2020/07/21 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
《钱学森》听课反思
2014/03/01 职场文书
2014年巴西世界杯口号
2014/06/05 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL