jQuery验证表单格式的使用方法
网络编程 2021-07-04 19:20www.168986.cn编程入门
本文给大家讲解关于此jQuery验证的一些标记以及使用方法,非常不错,具有参考借鉴借鉴价值,需要的朋友参考下
工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合。以下是关于此jQuery验证的一些标记以及使用方法
整个js代码都放入jquery_validate_1.1.0.js中,通过一个匿名函数,jQuery的扩展方法,扩展方法为initValidate函数,方法中带一个options配置参数,目前配置参数只有一个属性,{handlerUrl""}
,提供是否需要后台请求验证的url地址。只需要对取验证的DOM绑定$("ID").initValidate(options)
。通过给input控件添加自定义属性,自定义属性规则如下
<div id="panda"> <input type="text" validate="true" ctr-type="mobile" /> </div>
以上一个简单的demo是验证输入格式是否为手机号,如果输入的信息不符合规则,错误信息会提示在输入框下一行,如下图
validate="true" // 执行验证,这个不设置为true其他属性都不验证; isrequired="true" // 必填验证 checkunique="true" // 后台Ajax唯一性验证,如果不唯一则验证失败; ctr-type="email" // 格式是email, pwd密码,char姓名,number数字,float带小数的数字,mobile手机,idcard身份证; repeatpwd="true" // 密码重复性检验,这个标签必须出现在两个需要检验的密码和重复输入密码控件。 初始化示例 $('#panda').initValidate(); 提交按钮提交之前对所有输入进行验证 $('.okbtn').click(function () { return $('#panda').validateAllControls() }); Email验证使用示例 <input type="text" ctr-type="email" checkunique="true" isrequired="true" validate="true" name="myEmail" id="myEmail"/> <label class="error"></label> 密码验证使用示例 <input type="password" ctr-type="pwd" isrequired="true" validate="true" repeatpwd="true" name="newPassword"/> <label class="error"></label>
以上的验证,前提条件是validate="true"
,这个属性是验证其他规则的一切,如果没有设置这个属性,其他的任何设置都不会验证。此jquery验证为光标失去焦点的验证事件。
如果需要手动调用验证的话,调用单独的验证方法$("#panda").validateAllControls(options)
;输入框的自定义以上面一样设置。
文件的url路径,点击查看,不知道怎么添加压缩文件,这边留下一个url路径,为以后自己备份一份。
以上所述是长沙网络推广给大家介绍的jQuery验证表单格式的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
上一篇:详解vue之页面缓存问题(基于2.0)
下一篇:Html5 js实现手风琴效果
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程