位置: 编程技术 - 正文

详解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三分屏的制作方法

  • 无票收入在增值税表中填哪
  • 出口退税购入的商品进项税怎么处理
  • 小规模纳税人不动产租赁税率
  • 增值税进项加计扣除计入哪个科目
  • 公司入股资金有发票吗
  • 小规模纳税人专票和普票区别
  • 生活服务费发票 经营范围
  • 研发投入大
  • 自产的产品无偿赠送职工
  • 库存品种
  • 车间房屋维修费属于什么科目
  • 违约金 罚款
  • 职工福利费在期间费用表中怎么填
  • 甲供材简易征收税率
  • 会展服务服务费怎么是免税
  • 公司职工买房有补贴吗
  • 2019年小规模纳税人免征增值税政策
  • 个人所得税核定征收税率是多少
  • 成本费用跨年度怎么计算
  • 公司租赁房屋的物业费怎么入账
  • 净资产怎么算的 视频
  • 研发支出采用什么明细账
  • 个人所得税的税率是多少
  • 税票认证节假日可以顺延吗?
  • 委托代销售应确认什么
  • 企业所得税计算方法公式
  • 应收账款的内容包括
  • 结转本期损益要过账吗
  • 付佣金怎么做分录
  • 进项税额加计抵减会计分录
  • 增值税纳税人申报表怎么填写
  • 如何在excel中计算两列数值的差
  • windows 修改host
  • 企业员工个人所得税申报流程
  • 住房公积金怎么补缴费
  • 企业向股东发放现金股利会引起
  • idea怎么运行前端vue项目
  • PyTorch深度学习实战 | 基于ResNet的人脸关键点检测
  • 股东股权转让是什么意思
  • 合同没有约定发票税点谁承担怎么办
  • 电子商业承兑到期后多长时间能收到款
  • 工会经费绩效
  • 有材料成本差异的材料入库会计分录
  • 水利基金差额征收有哪些类型
  • 库存商品入库的会计分录怎么写
  • 太阳能发票图片
  • 预收账款还可以用吗
  • 电子承兑过期了
  • 售后回租服务费开票
  • 材料成本差异是什么
  • 进项税额和销项税额有什么区别
  • 土地勘测费收费标准
  • 不合格产品会计处理
  • 固定资产补缴增值税怎么做帐务处理
  • 银行存款会计分录需要输入哪些内容
  • 财务报表中的净利润
  • 直接减免税款的例子
  • 电子记录表怎么填写
  • 一般会计准则是什么
  • 天猫佣金是啥
  • 免税收入包括哪些项目
  • 特别提款权和普通提款权的区别
  • 房地产企业会计核算和税务处理大全
  • win7系统安装虚拟机
  • xp取消开机启动项
  • linux bas
  • 怎么激活win7旗舰版系统
  • 在linux系统中获取帮助信息的命令为
  • jquery tagname
  • vue只适合做单页项目吗
  • js自动切换图片效果
  • web前端网页设计师
  • js使用类
  • android ui自动化测试
  • 国家税务总局上海市电子税务局
  • 装卸搬运费属于
  • 小企业会计准则的印花税计入什么
  • 职业年金利息计入哪个科目里面
  • 员工的生育津贴计入工资总额吗
  • 税控盘怎么看收入
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设