位置: 编程技术 - 正文

表单验证插件Validation应用的实例讲解(表单验证插件)

编辑:rootadmin

推荐整理分享表单验证插件Validation应用的实例讲解(表单验证插件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:表单验证插件,表单验证原理,表单验证用什么方法实现,前端表单验证插件,validateform表单验证,validateform表单验证,表单验证插件,validate表单验证,内容如对您有帮助,希望把文章链接给更多的朋友!

jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。现在结合实际情况,我把项目中经常要用到的验证整理成一个实例DEMO,本文就是通过讲解这个实例来理解Validation的应用。

本实例涉及到的验证有:用户名:长度、字符验证,重复性ajax验证(是否已存在)。密码:长度验证,重复输入密码验证。邮件:邮件地址验证。固定电话:中国大陆固定电话号码验证。手机号:中国大陆手机号码验证。网址:网站URL地址验证。日期:标准日期格式验证。数字:整数、正整数验证,数字范围验证。身份证:大陆身份证号码验证。邮政编码:大陆邮政编码验证。文件:文件类型(后缀)验证,如只允许上传图片。IP:IP地址验证。验证码:验证码ajax验证。使用方法:1、准备jquery和jquery.validate插件

2、准备CSS样式页面样式我不再详述,大家可以自己写个样式,也可以参看DEMO的页面源代码。这里要强调的关键样式是要显示验证信息的样式:

3、XHTML

值得一提的是,我在给了标签一个“required”类样式,下文将会提到它的作用。4、应用Validation插件调用Validation插件的方法:

rules:定义验证规则,key:value的形式,key是要验证的元素,value可以是字符串或对象。比如验证用户名的长度和不允许为空:

表单验证插件Validation应用的实例讲解(表单验证插件)

其实我们在XHTML代码中可以直接指定input的class属性为required,作用是不允许为空,这样在JS部分就不用重复写了。同样的验证email等,直接设置input的class属性为email。messages:定义提示信息,key:value的形式key是要验证的元素,值是字符串或函数,当验证不通过时提示的信息。

本例中涉及的验证JS就是按照上面的规则进行编写的,Validation插件封装了好多基本的验证方式,如下:required:true 必须有值,不能为空remote:url 可以用于判断用户名等是否已经存在,服务器端输出true,表示验证通过minlength:6 最小长度为6maxlength: 最大长度为rangelength:长度范围range:[,] 数值范围在-之间email:true 验证邮件url:true 验证URL网址dateISO:true 验证日期格式'yyyy-mm-dd'digits:true 只能为数字accept:'gif|jpg' 只接受gif或jpg为后缀的图片。常用于验证文件的扩展名equalTo:'#pass' 与哪个表单字段的值相等,常用于验证重复输入密码此外,我还根据项目实际情况扩展了几个验证,验证的代码在validate-ex.js,使用前需要先加载这个JS。它能提供以下验证:userName:true 用户名只能包括中文字、英文字母、数字和下划线isMobile:true 手机号码验证isPhone:true 大陆手机号码验证isZipCode:true 邮政编码验证isIdCardNo:true 大陆身份证号码验证ip:true IP地址验证以上提供的验证方式基本上满足我们在大多数项目中的需求。如果其他特殊验证需求,可以扩展,方法如:

疑难问题解决:1、在项目中遇到在验证用户名是否存在时,发现不支持中文输入验证。我的解决办法是给用户名进行encodeURIComponent编码,后台PHP再对接受的值进行urldecode解码

服务端验证程序chk_user.php的代码:

我使用的服务端程序是PHP,您也可以使用ASP,ASP.NET,JAVA等。此外本例为了演示,用户名数据是直接写在服务端的,真正的应用是从数据库里取出的用户名数据,来和接收客户端的数据进行对比。2、在验证checkbox和radio控件时,验证信息不会出现在最后的控件文本后面,而是直接跟在第一个控件的后面,不符合我们的要求。

解决办法是在validate({})追加以下代码:

3、重置表单。Form表单原始的重置方法是reset自带

点击“重置”按钮,表单元素将会重置,但是再运行Validation插件后,验证的提示信息并没重置,就是那些提示信息没有消失。感谢Validation提供了重置表单的方法:resetForm()

jQuery实现仿新浪微博浮动的消息提示框(可智能定位) 本文实例讲述了jQuery实现仿新浪微博浮动的消息提示框。分享给大家供大家参考。具体如下:这是一款jQuery实现的仿新浪微博新消息提示框效果,支持

jQuery实现鼠标经过时出现隐藏层文字链接的方法 本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法。分享给大家供大家参考。具体如下:这里演示Jquery显示隐藏层的方法,鼠标经过时出

jquery实现可自动判断位置的弹出层效果代码 本文实例讲述了jquery实现可自动判断位置的弹出层效果代码。分享给大家供大家参考。具体如下:这是一款jquery实现的智能弹出层效果,位置可以自适

标签: 表单验证插件

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

上一篇:jqTransform美化表单(java美化按钮)

下一篇:jQuery实现仿新浪微博浮动的消息提示框(可智能定位)

  • 知识产权入股需要过户给对方么
  • 小规模纳税人资产负债表和利润表
  • 汇算清缴可以调成本吗
  • 几年前的发票能入账吗
  • 子公司分红母公司缴税吗
  • T3现金流量表怎么删除
  • 出口退税逾期申报,需申报出口货物收汇情况表
  • 企业所得税申报表在哪里打印
  • 银行的抵债资产是什么
  • 营改增后自建厂房抵扣
  • 未分配利润调整会计分录
  • 劳务外包用工单位可以抵扣进项税吗
  • 营改增后的民办养老院收入是否含增值税收入?
  • 增值税专用发票电子版
  • 交强险和车船税必须一起交吗
  • 增值税专用发票几个点
  • 国税2016年第53号公告解读
  • 集团对子公司投资收益协议
  • 返还工资保证金的书面申请
  • 销售折让怎么处理
  • swupdtmr.exe - swupdtmr进程是什么意思 什么作用
  • 事业单位自筹基金有哪些
  • 来电转接怎么设置空号
  • 记账凭证的编制方法有几种
  • 存货的核算方法
  • PHP:zip_entry_open()的用法_Zip函数
  • php foo
  • 出售固定资产申报表收入与损益表收入不一致
  • 建筑企业分项目信息采集表怎么填
  • PHP jQuery+Ajax结合写批量删除功能
  • 未发货先开票后付款是否违法
  • 不得抵扣的增值税怎么处理
  • 框架的弊端和作用
  • 会计分录怎么分借方和贷方
  • 留抵税额是认证过的发票吗
  • 改进的拼音
  • 前端按钮跳转界面
  • 端午假期干什么
  • css怎么让文字垂直居中显示
  • 开具红字发票资料清单
  • 电子商业汇票线下清算流程
  • 印花税零申报操作流程
  • 中标违约保证金怎么算
  • 选择mysql数据库为当前数据库
  • 职工食堂费用计入哪个科目
  • 税局代个人开增值税普通票样板
  • 电子承兑汇票贴现怎么做账
  • 年终奖可以不计入社保基数吗
  • 固定资产折旧及残值率
  • 增值税发票红冲的相关规定
  • 销售使用过的固定资产怎么填申报表
  • 项目支付预缴税额怎么算
  • 建筑企业如何按季度申报
  • 固定资产当月入账当月计提吗
  • 没有到位的注资公司
  • 定额发票和增值税普通发票的区别
  • 增值税进项发票抵扣认证流程
  • 私营公司应付利息怎么算
  • 解析关于sql语句的实现
  • mysql运行代码
  • 如何创建桌面快捷方式电脑
  • win8打开桌面
  • 众微科技怎么样
  • exeploer.exe
  • 一岁的宝宝可以喝枸杞水吗
  • ubuntu14.04启动不了
  • xp启用telnet
  • win8任务栏假死
  • 基于核心素养下的大单元教学设计
  • python多进程模块
  • js document.cookie
  • android aoa
  • jquery遍历li
  • cmd 更改密码
  • jquery1.8
  • 深入理解新发展理念
  • js对象类
  • jquery的dialog
  • 重庆电子税务局网页版登录
  • 河北农信登录密码错误
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设