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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
Jquery跳到页面指定位置的方法
May 12 Javascript
angular.js分页代码的实例
Jul 27 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
js实现微信聊天效果
Aug 09 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
使用无限生命期Session的方法
2006/10/09 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
Symfony核心类概述
2016/03/17 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
Javascript常考语句107条收集
2010/03/09 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
Python实现简单多线程任务队列
2016/02/27 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python中的decimal类型转换实例详解
2019/06/26 Python
Python初学者常见错误详解
2019/07/02 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
pytorch 使用单个GPU与多个GPU进行训练与测试的方法
2019/08/19 Python
详解Python的三种拷贝方式
2020/02/11 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
高三英语教学反思
2014/01/13 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
股东授权委托书
2014/10/15 职场文书
入党个人总结范文
2015/03/02 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers