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路径:http://files.cnblogs.com/files/panda-/jquery_validate_1.1.0.js,点击查看,不知道怎么添加压缩文件,这边留下一个url路径,为以后自己备份一份。
以上所述是小编给大家介绍的jQuery验证表单格式的使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
jQuery插件formValidator实现表单验证
本文实例为大家分享了formValidator实现表单验证的具体代码,供大家参考,具体内容如下 测试效果: 所需的库文件: 实现代码: <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona
-
Jquery表单验证失败后不提交的解决方法
前言 这个问题经过我的整理发现是对事件的认识和js的结构没有了解清楚,return的false在onclick事件中没有返回,所以onclick之后只是显示了false值. 解决方法示例 就是一个普通的表单验证提交: <input type="botton" </code><code>onclick="javascript:checkUserInfo()"</code><code>/> checkUserI
-
jQuery表单验证简单示例
本文实例讲述了jQuery表单验证简单用法.分享给大家供大家参考,具体如下: 这几天一直在做一个表单验证的页面,为了达到友好界面,特意去抄了360buy的页面,模仿写了一个页面 jquery 表单验证 就是验证表单里面所信息都为必填 //注册页面验证机制 $("#username").focus(function(){ //用focus()表单,当光标在输入框的时候执行下面的代码 $("#username_error").removeClass("erro
-
jQuery EasyUI提交表单验证
EasyUI的form表单里面的验证框,先讲解下validatebox类和相关的属性. 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email:匹配 email 正则表达式规则,系统提供的属性. url:匹配 URL 正则表达式规则 length[0,100]:允许从 x 到 y 个字符 remote['http://.../action.do','paramName']:发送 ajax 请求来验证值,成功时返回 'true'
-
jQuery Validate表单验证插件 添加class属性形式的校验
本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一.jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----添加cla
-
基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的
-
功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点
-
jQuery表单验证插件解析(推荐)
一:插件 (1) Validform_v5.3.1_min.js Validform_Datatype.js (2)网址:http://validform.rjboy.cn 在这个网站上有demo和插件下载链接. 二:普通验证 (1)Validform_Datatype.js /* Validform datatype extension By sean during December 8, 2012 - February 20, 2013 For more information, pleas
-
jQuery验证表单格式的使用方法
工作之余整理一些工作中编写的代码,记录自己工作中的技术要点,便于自己记忆已经整合.以下是关于此jQuery验证的一些标记以及使用方法: 整个js代码都放入jquery_validate_1.1.0.js中,通过一个匿名函数,jQuery的扩展方法,扩展方法为:initValidate函数,方法中带一个options配置参数,目前配置参数只有一个属性,{handlerUrl:""},提供是否需要后台请求验证的url地址.只需要对取验证的DOM绑定$("ID").ini
-
jQuery Form表单取值的方法
之前js取form表单的值都是一个一个的取,数量一多之后容易出错而且烦透了.感谢那些愿意分享的人. 页面定义form,并给form指定id值,里面的元素只要是需要键值对应的都赋予name属性,并且name值等于后台能识别的参数名. <form method='post' id="punishformID"> <input hidden="hidden" name="Stu" value=@Model.Stu> <in
-
jquery validation验证表单插件
jQuery验证表单插件--jquery-validation The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy. --官方介绍 validation使用步骤 引入jQuery库和validation插件 如果需要官方的
-
jQuery Validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数:
-
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
本文实例讲述了jQuery实现验证表单密码一致性及正则表达式验证邮箱.手机号的方法. jQuery 脚本 <script type="text/javascript"> function check_password() { if ($("#password").val() != $("#checkPWD").val()){ alert("请保证两次输入密码的一致性!"); $("#checkPWD&qu
-
JavaScript简单验证表单空值及邮箱格式的方法
本文实例讲述了JavaScript简单验证表单空值及邮箱格式的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="
-
jquery.validate表单验证插件使用方法解析
为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易.jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下 使用方式 1.在控件中使用默认验证规则,例子: 电子邮件(必填) <input id="email" class="required email" value="email@" /> 2.可以在控件中自定义验证规则
-
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
下面搜集了五种方法,主要还是前两个提供了解决方案,第三种需要修改jQuery源码: 修复jquery.validate插件中name属性相同(如name='a[]')时验证的bug 使用jQuery.validate插件http://jqueryvalidation.org/,当节点的name相同时候,脚本特意忽略剩余节点,导致所有相关节点的errMsg都显示在第一个相关节点上.这个bug在动态生成表单时候影响比较大. 通过查询资料,找到一个解决方案: http://stackoverflow.
-
详解jQuery的表单验证插件--Validation
大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言.该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 团队的一名成员,是 jQuery UI 团队的主要开发人员,是 QUnit 的维护人员.该插件
-
深入学习jQuery Validate表单验证
本文实例介绍了jQuery Validate表单验证,主要是利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示,分享给大家供大家参考,具体内容如下 1.添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面. 2.需要改写触发校验的方式. $("#commentForm").validate({meta: "validate"}); 3.详细代码如下: <html> <hea
随机推荐
- android中Invalidate和postInvalidate的更新view区别
- js阻止默认浏览器行为与冒泡行为的实现代码
- ASP基础知识Command对象讲解
- Linux下MySql 1036 错误码解决(1036: Table 'xxxx' is read only)
- 分页技术原理与实现之Java+Oracle代码实现分页(二)
- jquery渐隐渐显的图片幻灯闪烁切换实现方法
- gdb调试命令的使用及总结
- MongoDB的Master-Slave主从模式配置及主从复制要点解析
- jQuery实现自定义checkbox和radio样式
- 浅谈jQuery 选择器和dom操作
- javascript设计模式之策略模式学习笔记
- 关于jQuery参考实例2.0 用jQuery选择元素
- 一个简洁的PHP可逆加密函数(分享)
- C++指针作为函数的参数进行传递时需要注意的一些问题
- Java 向上转型和向下转型的详解
- JavaScript 组件之旅(二)编码实现和算法
- C#如何自动选择出系统中最合适的IP地址
- docker之创建MariaDB镜像的方法
- SpringBoot快速搭建web项目详细步骤总结
- 使用selenium和pyquery爬取京东商品列表过程解析