位置: 编程技术 - 正文

表单验证插件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实现仿新浪微博浮动的消息提示框(可智能定位)

  • 个体户定期定额征收标准
  • 资产负债表的其他流动资产包括哪些
  • 小规模个税每月限免额是多少
  • 微信小程序需要授权怎么设置
  • 中央空调折旧年限是多久
  • 土地增值税筹划实战
  • 将自产产品赠送他人
  • 总公司亏损分公司盈利如何处理
  • 电力公司安装变压器要多少钱
  • 人力资源外包公司排名
  • 托收承付是收到钱了吗
  • 耕地占用税完税证明有什么用
  • 理论增值额的含义
  • 资产组可收回金额包含商誉的可收回金额吗
  • 赠送给客户的商品怎么做账
  • 递延所得税资产对应的会计科目
  • 前两个月亏损第三个月盈利所得税怎么计算
  • windows10开机很卡
  • 临时文件夹在哪个位置
  • 如何在excel中取最早与最晚
  • uniapp分享图片
  • macbook怎么修改默认系统
  • system 命令
  • 电脑每次开机都要选择系统怎么办
  • win11系统语言修改不了
  • 内退人员
  • 预缴土地增值税有滞纳金吗
  • myfastupdate.exe - myfastupdate是什么进程文件 有什么用
  • 公司给员工发放的福利都要扣个税吗
  • 总公司给分公司调货
  • 非合理损耗计入入账成本吗
  • html怎么嵌套php
  • 购买股票的佣金计入
  • 捐款怎么处理
  • webform前端
  • 长期股权投资后续计量收到红利账务处理
  • gmt微调
  • 保证增信是什么意思东奥2023
  • 应付职工薪酬账户
  • 当月计提的公积金怎么取
  • 应付账款增值税怎么算
  • 独立核算的分公司注销时账面怎么处理
  • 餐具报损率一般为多少
  • 银行承兑汇票和银行汇票的区别
  • 酒店的布草怎么铺
  • 简易计税开具的发票取得的进项可以抵扣嘛
  • 被选为工会代表
  • 农民工专户里的钱能转出来吗
  • 年底盈利但有往年亏损怎么处理
  • 现金存银行凭证
  • 计提是好是坏
  • 账务核对包括账表核对吗
  • 餐饮食材成本高怎么形容
  • 完全成本法作业成本法变动成本法对企业的影响
  • 公司年初计划都有哪些
  • 电脑操作系统win7
  • win10文字模糊怎么调整
  • ubuntu怎么安装包
  • WINDOWS系统中删除放入回收站的文件占用什么空间
  • 如何查看电脑型号及配置
  • win10系统升级后c盘满了
  • Win7系统重装后鼠标键盘不能用怎么办
  • xp密码忘记了怎么办大神
  • secondoption是什么意思
  • linux系统稳定
  • windows8输入法
  • cocos 2d x
  • [置顶]bilinovel
  • cls方法可以清除
  • ssh远程登录脚本
  • 怎么做到开放
  • 关于翡翠手镯知识
  • JavaScript的Number对象的toString()方法
  • jquery的实现原理
  • 代理记账公司自查自纠情况报告范文
  • 皇家税务与海关署
  • 期间费用如何分摊到成本中
  • 双公开双反馈什么意思
  • 天猫主体变更是什么意思
  • 呼和浩特新城区政府官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设