使用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 });
- Sql批量修改帝国cms文章发布时间(需unix时间,否则会变为1970-01-01)
- socket 通信 多线程调用窗体(委托)的几个知识点,记录在案,以备查阅
- 微信公众平台改版 终于支持图文消息链接了
- 机器学习黑客系列:模型比较与选择
- asp.net :使用jquery 的ajax +WebService+json 实现无刷新去后台值
- 用A标签实现页面内容定位 点击链接跳到具体位置
- Seq2seq模型的一个变种网络:Pointer Network的简单介绍
- 框架设计原则和规范(三)
- 微信推广功能支持图片广告和投放外链广告
- PHP 高级编程之多线程
- 框架设计原则和规范(四)
- python 函数参数的传递(参数带星号的说明)
- 微信公众平台增加更多统计项 让你更了解运营数据
- 用OpenCV计算道路交通流量的一个直观教程
- 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 数组属性和方法
- Ansible-安装配置
- React-Redux 100行代码简易版探究原理。
- Ansible-免密登录与主机清单Inventory
- 安装Ambari和HDP
- React中引入Vue3的@vue/reactivity 实现响应式状态管理
- Ansible Ad-Hoc与常用模块
- Ansible Playbook 初识
- Ansible Playbook 变量与 register 详解
- 初探 Spark ML 第一部分
- Ansible Facts 变量详解 添加用户账号Ansible 配置清单Inventory
- Ansible playbook 编程
- 前端工程师自检清单73答
- Ansible playbook Vault 加密
- MySQL主从复制
- Ansible Jinja2 模板使用