文档章节

jquery.validate.js 表单验证

cwt1357
 cwt1357
发布于 2015/12/16 10:29
字数 305
阅读 21
收藏 0
点赞 0
评论 0
 <script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

表单验证第一步(添加表单验证):

 $(document).ready(function(){
  $("#form").validate({});
 });

表单验证第二步(form表单里面的dom元素添加class 或属性 提交时被验证):

<input id="username" name="username" type="text" value="" class="required">
 <input id="username" name="username" type="text" value="" maxlength="50">

   验证错误是的提示信息:

<input id="username" name="username" title="用户名必填,最大长度50" type="text" value="" class="required" maxlength="50"> >

表单验证的时候有时候会有特殊需求,如错误提示的展现方式:固定位置,弹出框,自定义位置

$(document).ready(function(){
  $("#form").validate({
  errorPlacement:callback
  });
 }); 
  function callback(error, element)  {

    error.appendTo(element.parent());//固定位置
  }
  
  function callback(error, element)  {

    tipsFloor(element,2,"red","用户名必填,最大长度50")//自定义 可弹出框
      }

表单验证添加自定义方法

$.validator.addMethod(
"rulename",
function(value,element,params){
   if(params[0] > 50) {
    return false;
  }
},
"用户名必填,最大长度50"
)

使用自定义方法

  $(document).ready(function(){
       $("#form").validate({
          rules:{
             DOMname:{
                 rulename:function() {
                     return $("#domid").val()
                 }
             }          
           }
       });
   });

表单验证通过时调用处理过程

$(document).ready(function(){
  $("#form").validate({
   submitHandler: function(form) { 
    form.submit(); 
  }
  errorPlacement:callback
  });
});  

$(document).ready(function(){
  $("#form").validate({
   submitHandler: function(form) { 
      form_sava()//ajax请求提交表单 
      return false;
   }
  errorPlacement:callback
  });
});

© 著作权归作者所有

共有 人打赏支持
cwt1357
粉丝 0
博文 24
码字总数 58671
作品 0
沙坪坝
javascript设计模式之策略模式

一、定义 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 二、正文 相信大家在web开发的时候都接触过jquery验证插件jquery.vali...

漂泊者及其影子 ⋅ 2014/01/10 ⋅ 0

在.Net中使用Jquery.validate.js来验证Form的问题

在.NET中所有的服务器控件Button在生成HTML的时候,都将自动生成为submit. 而jquery.validate.js在验证时,如果验证没有通过,刚不允许提交。 这下悲剧了,如果我有多个服务器端的Button控件...

一周寂寞七天 ⋅ 2011/05/23 ⋅ 7

jQuery.validate插件在失去焦点时执行验证代码

关于 jquery.validate.js 表单验证插件如何在失去焦点时做验证。看手册后发现默认是在表单提交时执行验证代码。手册中提到使用 onfocusout:false 来解决失去焦点时验证的参数功能,但是经测试...

mahengyang ⋅ 2014/09/09 ⋅ 4

jquery.validate.js 的 remote 后台验证

之前已经有一篇关于jquery.validate.js验证的文章,还不太理解的可以先看看:jQuery Validate 表单验证(这篇文章只是介绍了一下如何实现前台验证,并没有涉及后台验证remote方法)。 有时候我...

frylan ⋅ 2013/07/08 ⋅ 3

jQuery验证使用

首先要加载jquery.js与jquery.validate.js两个文件。 然后可以写验证规则,与错误提示语,也可以写自定义的验证函数。 这里的验证一般针对于html表单中的各种控件。根据它们的名字进行验证。...

桃子红了呐 ⋅ 2017/06/27 ⋅ 0

jquery.validate.js只能对表单进行验证吗?

想要对jquery.ajax()提交请求前进行验证,但发现jquery.validate.js只对表单进行验证,就是只会拦截$().submit(),对异步提交的$.ajax()方法没有作用,是不是要改写validate.js,怎么处理啊 ...

one_day ⋅ 2012/08/17 ⋅ 1

如何结合Jquery 的validate 和 ajax submit进行工作.

我刚接触Jquery,需要修改公司的重做公司的一个系统,准备用Jquery做JS框架,遇到一个问题. 我们知道Jquery 的jquery.validate.js的这个函数可以帮我做表单的验证,用于帮定错误信息到各个属性,...

wjyy ⋅ 2013/05/23 ⋅ 6

jQuery表单验证插件--Validation

jquery.validate.js 是一款执行表单输入信息验证的jQuery插件。要求 jQuery 1.2.6+, compatible with 1.3.x 特点: 安装简单 内置超过20种数据验证方法 直列错误提示信息 可扩展的数据验证方...

匿名 ⋅ 2008/09/19 ⋅ 0

jQuery validate插件初探

jQuery的validate插件,在jQuery验证时使用非常方便。 具体使用步骤: 1.引入文件 既然是jQuery插件,必须要有jQuery作为支持jquery-1.3.2.min.js 然后是验证的核心文件jquery.validate.js ...

桃子红了呐 ⋅ 2017/07/07 ⋅ 0

jquery.validate.js在IE8下不验证

做了一个表单验证,用的是jquery.validate.js,版本1.11.1,使用时其它浏览器正常,但是在IE8下所有required都不起作用~请大家出出主意!

啊门徒 ⋅ 2014/05/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring | IOC AOP 注解 简单使用

写在前面的话 很久没更新笔记了,有人会抱怨:小冯啊,你是不是在偷懒啊,没有学习了。老哥,真的冤枉:我觉得我自己很菜,还在努力学习呢,正在学习Vue.js做管理系统呢。即便这样,我还是不...

Wenyi_Feng ⋅ 今天 ⋅ 0

博客迁移到 https://www.jianshu.com/u/aa501451a235

博客迁移到 https://www.jianshu.com/u/aa501451a235 本博客不再更新

为为02 ⋅ 今天 ⋅ 0

win10怎么彻底关闭自动更新

win10自带的更新每天都很多,每一次下载都要占用大量网络,而且安装要等得时间也蛮久的。 工具/原料 Win10 方法/步骤 单击左下角开始菜单点击设置图标进入设置界面 在设置窗口中输入“服务”...

阿K1225 ⋅ 今天 ⋅ 0

Elasticsearch 6.3.0 SQL功能使用案例分享

The best elasticsearch highlevel java rest api-----bboss Elasticsearch 6.3.0 官方新推出的SQL检索插件非常不错,本文一个实际案例来介绍其使用方法。 1.代码中的sql检索 @Testpu...

bboss ⋅ 今天 ⋅ 0

informix数据库在linux中的安装以及用java/c/c++访问

一、安装前准备 安装JDK(略) 到IBM官网上下载informix软件:iif.12.10.FC9DE.linux-x86_64.tar放在某个大家都可以访问的目录比如:/mypkg,并解压到该目录下。 我也放到了百度云和天翼云上...

wangxuwei ⋅ 今天 ⋅ 0

PHP语言系统ZBLOG或许无法重现月光博客的闪耀历史[图]

最近在写博客,希望通过自己努力打造一个优秀的教育类主题博客,名动江湖,但是问题来了,现在写博客还有前途吗?面对强大的自媒体站点围剿,还有信心和可能型吗? 至于程序部分,我选择了P...

原创小博客 ⋅ 今天 ⋅ 0

IntelliJ IDEA 2018.1新特性

工欲善其事必先利其器,如果有一款IDE可以让你更高效地专注于开发以及源码阅读,为什么不试一试? 本文转载自:netty技术内幕 3月27日,jetbrains正式发布期待已久的IntelliJ IDEA 2018.1,再...

Romane ⋅ 今天 ⋅ 0

浅谈设计模式之工厂模式

工厂模式(Factory Pattern)是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式。 在工厂模式中,我们在创建对象时不会对客户端暴露创建逻...

佛系程序猿灬 ⋅ 今天 ⋅ 0

Dockerfile基础命令总结

FROM 指定使用的基础base image FROM scratch # 制作base image ,不使用任何基础imageFROM centos # 使用base imageFROM ubuntu:14.04 尽量使用官方的base image,为了安全 LABEL 描述作...

ExtreU ⋅ 昨天 ⋅ 0

存储,对比私有云和公有云的不同

导读 说起公共存储,很难不与后网络公司时代的选择性外包联系起来,但尽管如此,它还是具备着简单和固有的可用性。公共存储的名字听起来也缺乏专有性,很像是把东西直接堆放在那里而不会得到...

问题终结者 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部