使用jQuery Validation插件来验证表单
时间:2022-04-27
本文章向大家介绍使用jQuery Validation插件来验证表单,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
jQuery Validation是一个用于验证表单的jQuery插件,简单易用,已经包含了16种内置的验证规则.Github上也有更多的验证规则可以使用.这都不是重点,重点是你可以轻松的定制自己的规则.
内置规则:
- required – Makes the element required.
- remote – Requests a resource to check the element for validity.
- minlength – Makes the element require a given minimum length.
- maxlength – Makes the element require a given maximum length.
- rangelength – Makes the element require a given value range.
- min – Makes the element require a given minimum.
- max – Makes the element require a given maximum.
- range – Makes the element require a given value range.
- step – Makes the element require a given step.
- email – Makes the element require a valid email
- url – Makes the element require a valid url
- date – Makes the element require a date.
- dateISO – Makes the element require an ISO date.
- number – Makes the element require a decimal number.
- digits – Makes the element require digits only.
- equalTo – Requires the element to be the same as another one
内置规则的使用
内置规则的使用非常简单:
首先将该插件的js文件包含进html文件:
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/jquery.validate.min.js"></script>
然后用jQuery选择需要验证的表单,执行validate()函数即可:
<script>
$("#form_id").validate();
</script>
jQuery Validation官网上的例子:
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url">
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
</body>
</html>
jQuery Validation会根据表单设置的type和属性自动为他们分配内置的规则,比如email,url,required等.
运行一下看看:
什么都不输入,直接点提交:
输入错误的Email地址,改正后错误提示自动消失:
添加自定义规则
jQuery Validation最吸引人的feature,它可以轻松的加入自定义的规则:
第一步,在js中调用jQuery.validator.addMethod函数来添加规则,例如添加IP格式检查的规则:
$.validator.addMethod( "ipv4", function( value, element ) {return this.optional( element ) || /^(25[0-5]|2[0-4]d|[01]?dd?).(25[0-5]|2[0-4]d|[01]?dd?).(25[0-5]|2[0-4]d|[01]?dd?).(25[0-5]|2[0-4]d|[01]?dd?)$/i.test( value );}, "Invalid IP v4 address." ); //自定义其他规则只需要替换规则名"ipv4",正则表达式//之间的内容,以及出错后显示的字符串"Invalid IP v4 address."即可.
第二步,把规则应用到指定的表单项,即在执行$("#form_id").validate()函数的时候加入rules参数:
23 $("#ip_form").validate({
24 rules: {
25 ip: {
26 required: true,
27 ipv4: true,
28 },
29 netmask: {
30 required: true,
31 ipv4: true,
32 },
33 gateway: {
34 required: true,
35 ipv4: true,
36 },
37 },
38 }); //其中ip,netmask,gateway为表单项的name属性.required和ipv4是规则名.
生效后的样子,可以添加如下css来修改错误信息的样式:
label.error {
margin-left: 10px;
padding-left: 5px;
padding-right: 5px;
color: #E2303A;
font-style: italic;
font: Helvetica Neue, 12px, #E2303A;
border: 1px solid #F2A9AE;
}
使用json提交数据
表单验证通过后,提交动作默认是使用form本身的提交动作,即指定form的action和method属性:
method="get" action=""
可以在validate()函数中添加submitHandler参数来指定点击提交后执行的函数,我们可以在该函数中使用$.json来提交数据:
23 $("#ip_form").validate({
24 rules: {
25 ip: {
26 required: true,
27 ipv4: true,
28 },
29 netmask: {
30 required: true,
31 ipv4: true,
32 },
33 gateway: {
34 required: true,
35 ipv4: true,
36 },
37 dns: {
38 dns: true,
39 }
40 },
41 submitHandler: function(form) {
42 ip_ok();
43 $("#ip-conf").modal('hide');
44 }
45 });
- Python文档精要研读系列(1):map函数
- SparkML模型选择(超参数调整)与调优
- visual studio 2012 的制作ActiveX、打包和发布
- 用java提交一个Spark应用程序
- 一步步教你利用Github开源项目实现网络爬虫:以抓取证券日报新闻为例
- 用linqPad帮助你快速学习LINQ
- Java 8 Stream 教程 (二)
- CountVectorizer
- Caliburn.Micro学习笔记(五)----协同IResult
- 一个Pythoner的自我修养系列(一)
- 众里寻她千百度,蓦然回首,那bug却在灯火阑珊处
- Github|Python开源项目漫游指南(一)
- Caliburn.Micro学习笔记(四)----IHandle<T>实现多语言功能
- .NET 4 System.Threading.CountdownEvent
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python自带的IDE在哪里
- php+Ajax无刷新验证用户名操作实例详解
- PHP经典设计模式之依赖注入定义与用法详解
- 浅谈python出错时traceback的解读
- PHP判断是否是微信打开还是浏览器打开的方法
- php面向对象程序设计中self与static的区别分析
- PHP如何根据文件头检测文件类型实例代码
- PHP去除空数组且数组键名重置的讲解
- Yii2框架配置文件(Application属性)与调试技巧实例分析
- java解析json方法总结
- PHP正则验证字符串是否为数字的两种方法并附常用正则
- 使用python编写一个语音朗读闹钟功能的示例代码
- PHP中常见的密码处理方式和建议总结
- php+Ajax处理xml与json格式数据的方法示例
- python3 循环读取excel文件并写入json操作