jquery.validate.js表单验证 jquery.validate.js的用法

时间:2022-01-05 05:59:24

jquery.validate.js这个插件已经用了2年多了,是一个不可多得的表单验证最方便快捷的插件。基于jquery的小插件,基本小白一学就会上手,对于项目表单页面比较多,元素比较多的校验,该插件基本分分钟就解决完。

本来想好好总结一下的。暂放demo。

想参考一下这篇楼主的博文。感觉总结的太好了!

http://www.cnblogs.com/si-shaohua/p/3780321.html#undefined

根据博主的总结,我这里主要是想提一下jquery.metadata.js(下载地址:http://www.bvbcode.com/code/g9tf82ml-899335-down)

他的用法是结合jquery.validate.js

写法基本是这个样子的class={};

前端写法无限多,这里就不细细区别那种用法更好,没那精力。其实引用这个写法的主要原因是他的写法会帮助我们动态校验自动生成的表格元素,总所周知啊:jquery.validate.js这个插件是基于表单的name名称进行校验的,而对于动态生成的表单这个name就有点困难困难了。(除非你们想到name[i],i++这种低级想法。因为后端基本不会给name起name1,name2,name3这种名字的,哪家也不这么在数据库里玩。除非自己本地的同学们,哈哈哈!)废话少说。这里就显出jquery.metadata.js他的高尚之品质!

以下是我项目中的一个小代码

 $(".add).on("click",function(){

var str='<tr class="trsec">'+
'<td><select name="assessVoList[][productMetadataId]" id="" class="risk">'+options+'</select></td>'+
'<td><select name="assessVoList[][LossTargetName]" class="subject">'+LossTargetNameid+'</select></td>'+
'<td><select name="assessVoList[][LossTargetType]" class="sslb">'+lossFeeTypeListid+'</select></td>'+
'<td><input type="text" value="'+item.losshow+'" placeholder="损失程度" name="assessVoList[][losshow]" class="losshow {required:true}"/></td>'+
'<td><a class="sbtn delete deleteone" data-toggle="modal" data-target=".mydelete">删除</a></td>'+
'</tr>';
$(".two").find("tbody").append(str);
})

点击按钮,给表格动态增加一条数据时,对表单里的元素进行校验。

jquery.validate.js表单验证  jquery.validate.js的用法jquery.validate.js表单验证  jquery.validate.js的用法

会自动进行校验的。

另外一种情况的解决方法:

校验该插件,我使用了jquery.validate.js. 针对name名称一致的,使用了

'assessVoList[][losshow]':{
required:true,
},
'assessVoList[][losshow]':{
required:“不能为空”,
},
另外需要插入一段js代码,来解决相同name名字时也校验。
rulesCache[this.name] = true;
return true;
if ($.validator) {
$.validator.prototype.elements = function () {
var validator = this,
rulesCache = {}; // select all valid inputs inside the form (no submit or reset buttons)
return $(this.currentForm)
.find("input, select, textarea")
.not(":submit, :reset, :image, [disabled]")
.not(this.settings.ignore)
.filter(function () {
if (!this.name && validator.settings.debug && window.console) {
console.error("%o has no name assigned", this);
}
//注释这行代码
// select only the first element for each name, and only those with rules specified
//if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
// return false;
//}
rulesCache[this.name] = true;
return true;
});
}
}

总之,很好用,马上动手做一下吧!

jquery.validate.js表单验证 jquery.validate.js的用法的更多相关文章

  1. Jquery&period;validate&period;js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  2. 表单验证的validate&period;js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

  3. jQuery&period;validate&period;js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  4. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  5. 异步提交form的时候利用jQuery validate实现表单验证

    异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则    // 电话号码验证    ...

  6. 基于Bootstrap&plus;jQuery&period;validate Form表单验证实践

    基于Bootstrap jQuery.validate Form表单验证实践 项目结构 :     github 上源码地址:https://github.com/starzou/front-end- ...

  7. jquery&period;validation&period;js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  8. 表单验证插件——validate

    表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options ...

  9. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

随机推荐

  1. ReactMix框架,让你实现一套js代码,基于ReactNative在H5,App都能完美跑起来,Write Once&comma;Run Anywhere

    ReactNative框架推出已经有一段时间了,相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想,比如淘宝的ReactWeb等等,但是这些框架都局限于因为ReactNa ...

  2. NOI2004 小H的小屋

    还是纯粹不会啊……到底该怎么办 http://blog.sina.com.cn/s/blog_86942b1401016m3g.html http://www.cnblogs.com/datam-cy ...

  3. JavaScript、JSP、Java及javaEE

    对JavaScript.JSP.Java及javaEE之间区别的理解 JavaScript和Java名字极为类似,相信不少的初学者或者准备学这些知识的人对于JavaScript.JSP.Java及Ja ...

  4. hdu149850 years&comma; 50 colors &lpar;多个最小顶点覆盖&rpar;

    50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  5. &lbrack;剑指Offer&rsqb;10-斐波那契数列&lpar;循环&rpar;-Java

    题解 使用循环,时间复杂度O(n). 相关 跳台阶:f(n)=f(n-1)+f(n-2) 变态跳台阶:f(n)=2*f(n-1) 矩形覆盖:f(n)=f(n-1)+f(n-2) 全部用循环代替递归,使 ...

  6. JPA&plus;Hibernate 3&period;3 ——增删改查

    1.     查找对象   1)  用find()方法查找对象 public void getPerson(){ EntityManagerFactory factory = Persistence. ...

  7. &lbrack;daily&rsqb;&lbrack;pcaman&rsqb; pacman滚动升级跳过指定包

    有时候有些包是坏的,  我们在Syu的时候,想把它跳过去. 可以在pacman.conf 中使用如下选项: IgnorePkg=linux https://wiki.archlinux.org/ind ...

  8. HTTP中Get、Post、Put与Delete。了解一下!

    1.GET请求会向数据库发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行多少次操 ...

  9. shiro 权限 URL 配置细节

  10. delphi 图像处理 二值化

    procedure TDR_QM_ZP_Form.Image_EZH( Bmp: TBitmap ); var p: PByteArray; Gray, x, y: Integer; begin // ...