首先需要引入插件:jquery.validate.js这个插件。

然后对需要验证的表单实现js:

$("#add-firewalls-form").validate({

submitHandler:function(){//验证通过提交函数

addFirewallsDialog.saveCreateFirewalls()//vue对象里边的提交函数

},

onfocusout:function(element){//鼠标失去焦点时候进行验证

$(elemnet).valid();

},

ignore:".ignore",//不需要验证的时候加这个类,当隐藏不需要验证的时候用。hidde这个类

onkeyup:false,

rules:{//验证的规则

name:{//把需要验证的HTML中name=“***”的***部分写在这里,就是验证的部分

required:true,//是否要验证,不能为空

isNormalName:true//是否使用自己定义的一个正则表达式

}

},

messages:{//验证失败对用的提示

name:{//name对应的提示信息

remote:commonModule.i18n("validate.guojihua")

}

},

errorElement:"span",

errorPlacement:function(error,elemnt){

element.parent('div').addClass("has-feedback");

if(element.prop("type")==="checkbox"){

error.insertAfter(element.parent("label"));

}else{

error.insertAfter(element);

}

},

success:function(label,element){

if(!$(element).next("span")[0]){

}

},

hightlight:function(elemnt,errorClass,validClass){

$(element).parent("div").addClass("has-error").removeClass("has-success");

},

unhightlight:function(elemnt,errorClass,validClass){

$(element).parent("div").addClass("has-success").removeClass("has-error");

}

});

对应的HTML:

<div class="form-group">

<label class="col-md-3 cloudos-require-label">名称</lable>

<div class="col-md-9">

<input class="form-control“ type="text" maxlength="15" name="mane"

v-on:focus="showTip('showNameTip')"

v-on:blur="hideTip('hideNameTip')"

v-model="nameValue"

<a class="glyphion glyphicon-remove form-control-feedback"></a>

<span class="cloudos-input-tip-right">提示信息</span>

</div>

</div>

jqury-validate表单验证的更多相关文章

  1. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  2. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  3. 【干货】Laravel --Validate (表单验证) 使用实例

    前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...

  4. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  5. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  6. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  7. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  8. thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成

    目录 1.案例 1.1图片上传  1.2进行图片木马检测   1.3缩略图生成   1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...

  9. validate表单验证-单独验证

    今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况.然后我就了解了一下jquery validate的验证 ...

  10. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

随机推荐

  1. biff - 新到邮件提醒

    总览 (SYNOPSIS) biff [ny ] 描述 (DESCRIPTION) Biff 通知系统在当前终端会话期间有新邮件是否提醒你. 支持的选项有 biff n 禁止新邮件提醒. y 开启新邮 ...

  2. ipv6工具类

    package mapreduce.nat; import java.math.BigDecimal; import java.math.BigInteger; import java.net.Ine ...

  3. SqlServer数据库练习20190211

    一条update语句,修改多个条件 update orderdt_jimmy set qty = (case else qty end); 好了,就这样

  4. Elasticsearch入门和基本使用

    1. 什么是Elasticsearch? Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统:Elastic 是 Lucene 的封装,提供了 REST API 的操作接口,开 ...

  5. [Luogu] P1865 A % B Problem

    题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对于每次询问输出个数 t,如l或r∉[1,m]输出 Cros ...

  6. [Python3网络爬虫开发实战] 1.5.2-PyMongo的安装

    在Python中,如果想要和MongoDB进行交互,就需要借助于PyMongo库,这里就来了解一下它的安装方法. 1. 相关链接 GitHub:https://github.com/mongodb/m ...

  7. 集训第四周(高效算法设计)L题 (背包贪心)

    Description   John Doe is a famous DJ and, therefore, has the problem of optimizing the placement of ...

  8. Java字符拼成图片(image-ASCII)

    目录 背景 代码思路 难点讲解 如何得到rgb 如何让不同颜色匹配不同字符 为什么我的图片只能打一半 OutOfMemoryError错误 为什么用汉字来打印图案会扭曲 装逼时刻 @(Java字符图片 ...

  9. pcb中几个层的解释

    阻焊层(Solder Mask):又称为绿油层,是PCB的非布线层,用于制成丝网漏印板,将不需要焊接的地方涂一层阻焊物质,防止焊接PCB时焊锡在高温下的流动性.在阻焊层上预留的焊盘大小,要比实际焊盘大 ...

  10. Jmeter关联-获取token值

    1. token就是令牌,比如你授权(登录)一个程序时,他就是个依据,判断你是否已经授权该软件:也叫关联 2. cookie就是写在客户端的一个txt文件,里面包括你登录信息之类的,这样你下次在登录某 ...