位置: 编程技术 - 正文

详解jQuery的表单验证插件--Validation(jquery form表单)

编辑:rootadmin

推荐整理分享详解jQuery的表单验证插件--Validation(jquery form表单),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery.table,jquery中的表单选择器,jq 表单,jq 表单,jquery操作表格,jquery给表单赋值,jq 表单,jquery 表单,内容如对您有帮助,希望把文章链接给更多的朋友!

大致介绍

jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 种语言。该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员。该插件在 年 jQuery 早期的时候就已经开始出现,并一直更新至今。访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

下载地址: Validate插件需要jQuery,所以我们需要在头部引入jQuery和Validate文件

文件引入完毕,先写个简单的表单

然后我们开始写验证表单的代码

首先我们需要知道那个表单需要验证

然后开始写验证的规则,要注意这里选择元素是根据每个标签的name属性选择的,基本语法如下

从上面可以看出,如果一个信息只有一个验证要求可以写成一行,比如 firstname;如果有多个验证要写成像 lastname 这种形式;知道了基本的语法

在看看Validation都提供了那些校验规则

我们将上面的表单验证完善一下,如下

效果:

可以看到,这里的提示默认是英文的不太满意,将提示信息更改成中文有两种方式

第一种方式:引入语言文件(推荐)

<script type="text/javascript" src="dist/localization/messages_zh.js"></script>

他的提示信息是:

第二种方式:自己写提示信息

效果:

注意:还有一种写验证的方式是在 class 中写,例如

<input id="firstname" name="firstname" type="text" class="{required:true, minlength:2}">

但是不推荐这种写法,因为不符合样式与结构分离的要求,并且还需要自己下载一个jquery.metadata.js文件才能够这样写

表单提交问题

可以在表单提交之前执行我们自定义的代码,当我们的自定义代码执行完毕后再提交表单

可以设置validate的默认值

只验证不提交表单

错误提示信息设置

1、错误信息位置设置

errorPlacement方法是设置错误信息显示在哪,默认值是在验证元素的后面

errorClass 是设置错误信息的样式,后跟css类名

errorElement 是设置用什么标签包住错误信息,默认值是<label>

errorLabelContainer 是设置将所有的错误信息包在一个地方

wrapper 是设置用什么标签再把上边的 errorELement 包起来

例如:

是将错误提示信息显示在验证的信息前面

详解jQuery的表单验证插件--Validation(jquery form表单)

效果:

例如:

是将每个提示信息用<span>标签包起来,给他们添加css名为 .commentError 的样式, 并把他们都包再一个class为 error 的div里,在用<li>把每个提示信息包起来  

效果:

2、错误信息样式设置

有两种方式可以修改提示信息的样式

第一种就是采用下载Validation时自带的样式文件

<link href="demo/css/screen.css" type="text/css" rel="stylesheet" />

第二种方式就是自己定义样式(当然也可以修改自带的css文件)

例如添加这样的样式:

效果:

验证时的问题

1、验证的元素通过

验证的元素通过验证时如果要进行操作,可以使用 success ,他可以接受字符串或者是函数,当接受的是字符串的时候是添加样式

例如:

是在要验证的元素通过验证时,弹出1

例如:

success: "valid"

是将css样式名为 .valid 添加到元素上

2、验证方式

自定义校验

虽然Validation提供了许多验证的方式,但是有些情况还是不够用的,所以如果要添加自定义的校验方式可以使用 addMethod 方法,通常将自定义的方法写在 additional-methods.js 中,然后要引入这个文件

<script type="text/javascript" src="dist/additional-methods.js"></script>

写入 additional-methods.js 文件的内容

例如:

只要把这段代码写入 additional-methods.js 文件就可以使用了

例如:

效果:

radio 和 checkbox、select 的验证

radio的required表示必须选中一个

checkbox的required表示必须选中,minlength表示必须选中的最小个数,maxlength表示必须选中的最大个数,rangelength[2,3]表示选中个数区间

select的required表示选中的value不能为空,minlength表示必须选中的最小个数,maxlength表示必须选中的最大个数,rangelength[2,3]表示选中个数区间

总结:Validation插件提供了许多的验证,用户可以自己添加自己的验证和提示信息的样式,但是在博客中我并没有提及与ajax相关的内容,因为ajax还没有学习-_-||,如果有什么问题可以和我探讨,如果有不对的地方,欢迎指正

标签: jquery form表单

本文链接地址:https://www.jiuchutong.com/biancheng/373958.html 转载请保留说明!

上一篇:jQuery实现立体式数字滚动条增加效果(jquery设置title)

下一篇:基于jPlayer三分屏的制作方法

  • 房产税应该怎么申报
  • 退休职工能否扣医保
  • 工程材料发票备注要求
  • 专家住宿费入什么科目
  • 非房地产企业销售不动产增值税计算
  • 核定征收企业怎么分红的
  • 不合格发票入账责任
  • 长期股权投资成本法转权益法追溯调整
  • 进项税留底是什么意思
  • 联营商品如何做账
  • 出售无形资产属于让渡资产使用权吗
  • 普票红冲部分金额的发票怎么开
  • 增值税留抵税额抵减欠税
  • 城市维护建设税减免税优惠政策
  • 海关新增成交方式exw条款,如何退税?
  • 国外企业提供国际运输服务税率
  • 扣收贷款本息
  • 生产企业土地使用权摊销
  • 小规模纳税人别人开了专票怎样处理
  • 现金流量表的余额和资产负债表货币资金是不是一定相等
  • 个人独资企业对公账户转个人账户
  • 小企业的费用应当在发生时计入当期损益
  • 待处理财产损益期末结转到哪里
  • 小规模纳税企业所得税优惠政策
  • 营改增后还要交营业税吗
  • 先征后退房产税的会计处理?
  • 参加失业保险本期实际缴费金额包括员工承担部分吗?
  • 税负率的销售收入是什么
  • 收到退回多付款现金流量支付购买商品支付
  • php框架的作用
  • 挂账多年的往来账怎么处理
  • 华沙的教堂
  • 阿里前端做什么
  • php安装及使用教程
  • 企业缴纳的所得税应以净利润为基础
  • 金蝶迷你版财务软件报价
  • python 命令行参数解析
  • 支付网络服务费属于现金流量表的哪一项
  • 残疾证哪里发
  • 微众银行贷款利率2023最新
  • 城市道路占用费的收费标准
  • phpcms怎么用
  • 计提的坏账准备计入什么科目
  • 购销合同谁来做
  • 淘宝电子发票怎么申请
  • 外企可以申请高新技术
  • 企业生产经营发展
  • 固定资产资本化后续支出
  • 交易性金融资产公允价值变动怎么算
  • 独立法人的全资子公司
  • 应缴国库款和应缴专户款的区别
  • 会计的视频教程
  • 辅助核算设置后使用后还可以随时修改
  • 出纳 记账凭证
  • 固定资产怎么记入账本明细科目
  • mysql字段超长
  • xp系统ip地址设置在哪里
  • winxp系统怎么连接网络
  • centos7 nis
  • winxp关机立马自动重启
  • winxp怎么自动开机
  • win11玩dota2
  • windowsxp优化教程
  • win7系统自动注销重启
  • jquery ajax异步提交表单数据的方法
  • label控件的作用
  • jsonp的使用
  • Linux中删除文件夹的正确方式
  • 批处理计算的特点
  • python和js哪个好
  • 圆形图表分析怎么做
  • javascript+HTML5自定义元素播放焦点图动画
  • node.js的理解
  • javascript自定义函数
  • jquery导入
  • python基础教程入门
  • 税务非正常户转正常户的申请报告
  • 土地增值税有哪些征收方式
  • 上海地方税务局发票查询
  • 电信追缴欠费的工作方案有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设