>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>欢迎转载,转载请注明出处-VirgoArt,www.cnblogs.com

1.引用jquery-1.9.1.min.js与jquery.validate.min.js

2.在JS加载初始化时,进行事件绑定。

3.BindEvent(); 初始化插件,应用。

4.BindEvent(); 实现自定义校验方法:

$.validator.addMethod("methodName", function(value, element) {
if(){
return true;
}else{
return false;
}
}, "");

5.绑定表单校验

_validate = $("#formId").validate({
rules : {
'inputName' : {
required : true,
methodName :true
}
},
messages : {
'inputName' : {
required : "该项为必填项",
methodName:"输入不满足规则"
}
}
});

6.为当前表单输入框追加校验

var rules = {};
rules[inputName1] = {
methodName: true
};
rules[inputName2] = {
methodName: true
};
$.extend(_validate.settings.rules, rules);
var messages = {};
messages[inputName1] = {
methodName:" 输入不满足规则"
};
messages[inputName2] = {
methodName: "输入不满足规则"
};
$.extend(_validate.settings.messages, messages);

7.提交时,验证是否可以提交

if (!$("#formId ").valid()) {
return;
}

前端校验插件——Validator简单使用的更多相关文章

  1. nice-validator表单验证插件的简单使用

    前言 前端表单校验是过滤无效数据.假数据.有毒数据的第一步,是数据安全的第一道关卡,虽然我们不能100%相信客户端提交的数据(真正的校验还得在服务端进行),但设置前端表单校验也是至关重要的,自己写逻辑 ...

  2. 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件

    Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用   一.json数据结构 1.什么是json JSON(J ...

  3. 程序猿必备的8款web前端开发插件三

    1.HTML5 Canvas 3D波浪翻滚动画 之前我们分享过好几款基于HTML5 Canvas的波浪和水波纹动画,比如这款HTML5 3D波浪起伏动画特效和这款超酷无比的HTML5 WebGL水面水 ...

  4. validate表单校验插件笔记

    1validation知识点 1 validation基础 validation插件下载http://bassistance.de/jquery-plugins/jquery-plugin-valid ...

  5. 第一百八十三节,jQuery-UI,知问前端--验证插件

    jQuery-UI,知问前端--验证插件 学习要点: 1.使用 validate.js 插件 2.默认验证规则 3.validate()方法和选项 4.validate.js 其他功能 验证插件(va ...

  6. 表单校验插件(bootstrap-validator)

    表单校验插件(bootstrap-validator) 参考文档 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog. ...

  7. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  8. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  9. Sublime Text3的react代码校验插件

    之前写前端一直用的是jshint做语法检查,但jshint不支持JSX语法,为了在React使用,需要用eslint代替它.六月份的时候为了写React Native,编辑器换过Webstorm和VS ...

随机推荐

  1. Vue针对性笔记

    Github原文阅读 MVVM(Model-View-ViewModel)模型 MVVM分为Model.View.ViewModel三部分. Model代表数据模型,定义数据和业务逻辑,访问数据层 V ...

  2. python 向量化

    study from : https://www.jianshu.com/p/ad8933dd6407

  3. Activity之间的跳转和数据传输

    1.显式跳转 protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceSt ...

  4. Livereload or meta

    静态页面布局的过程中,如果可以一边写一边看见结果,那肯定是很方便的,在最开始使用的DW中实现了这一目标,但并不是浏览器环境下.之后使用gulp中的livereload后配合chrome插件livere ...

  5. Intellij IDEA 修改jsp 不能实时更新

    Intellij IDEA 修改jsp 不能实时更新 1. 首先,output要指定到项目的webapp下,这样应该就可以实时更新了 2. 我的问题是这样设置之后,也不可以,原来是可以的,重装系统之后 ...

  6. 在线制作微信跳转浏览器下载app/打开指定页面源码

    微信自动跳转外部浏览器下载app/打开指定页面源码 源码说明: 适用安卓和苹果系统,支持任何网页链接.并且无论链接是否已经被微信拦截,均可实现微信内自动跳转浏览器打开. 生成的跳转链接具有极佳的防拦截 ...

  7. JAVA进阶22

    1.接口默认方法的使用 ①接口的默认方法可以通过接口实现类对象直接调用. ②接口的默认方法也可以被接口实现类进行覆盖重写 package cn.intcast.demo17; public inter ...

  8. 通过配置文件新建solr的core

    目录solr-7.5.0\server\solr 1.  新建文件夹 test-core 2. 在文件夹test-core下新建core.properties name=test-core confi ...

  9. 002 requests的使用方法以及xpath和beautifulsoup4提取数据

    1.直接使用url,没用headers的请求 import requests url = 'http://www.baidu.com' # requests请求用get方法 response = re ...

  10. 【转】一文掌握 Linux 性能分析之网络篇(续)

    [转]一文掌握 Linux 性能分析之网络篇(续) 在上篇网络篇中,我们已经介绍了几个 Linux 网络方向的性能分析工具,本文再补充几个.总结下来,余下的工具包括但不限于以下几个: sar:统计信息 ...