我们经常看到如下效果，那么它是如何实现的呢？看下面：

废话少说，直接上代码，大家直接Copy就能看到上面的效果啦。

<html>

<head>

<title>验证内容</title>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<script>

$(function(){

  $("#signupForm").validate({

     rules:{

        firstName:"required",

        lastName:{required:true,maxlength:}

     },

     message:{

        firstName:"请输入您的姓名",

        lastName:{required:"请输入您的姓氏",maxlength:"输入的字符个数超限"}

     }

  })

})

</script>

<style>

.error{

    color:red;

}

</style>

</head>

<body>

<form id="signupForm">

<fieldset>

<legend>验证完整的表单</legend>

<p>

      <label for="firstName">名字</label>

      <input id="firstName" name="firstName" type="text">

</p>

<p>

      <label for="lastName">姓氏</label>

      <input id="lastName" name="lastName" type="text">

</p>

<p>

      <input type="submit"    class="submit" value="提交"/>

</p>

</fieldset>

</form>

</body>

</html>

详细学习可参考: http://www.runoob.com/jquery/jquery-plugin-validate.html

jQuery Validate前端验证的更多相关文章

  1. 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）

    废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

  2. 封装jQuery Validate扩展验证方法

    一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...

  3. jquery validate remote验证唯一性

    jquery.validate.js 的 remote 后台验证 之前已经有一篇关于jquery.validate.js验证的文章,还不太理解的可以先看看:jQuery Validate 表单验证(这 ...

  4. jquery validate扩展验证方法

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  5. 扩展jquery.validate自定义验证，自定义提示，本地化

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  6. 1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.

    1)jquery  validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...

  7. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  8. 使用tooltip显示jquery.validate.unobtrusive验证信息

    通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = " ...

  9. jQuery Validate Ajax 验证

    jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...

随机推荐

  1. js-undefinde的一点延伸

    前面写过一篇js中变量定义的问题:Js中判断变量存不存在的问题 本文再补充下,变量声明未初始化的情况,代码: <script> var a; alert(a==undefined)//tr ...

  2. Java时间日期格式转换Date转String和String转Date

    Java时间格式转换大全 import java.text.*; import java.util.Calendar; public class VeDate { /** * 获取现在时间 * * @ ...

  3. Python 切片 day3

    你可以处理列表的部分元素——Python称之为切片 . 一.使用方法: 要创建切片,可指定要使用的第一个元素和最后一个元素的索引. 与函数range() 一样,Python在到达你指定的第二个索引前面 ...

  4. Python笔记（29）----进程

    目录: 一.进程 多任务的概念 创建子进程----fork[Linux] 全局变量在多个进程中不共享 多次fork() 创建进程----multiprocessing[windows] 二.线程 一. ...

  5. 安装 Ubuntu 14.04 之后要做的一些事

    转自:  http://www.cnblogs.com/marcowei/p/3841342.html 安装 ubuntu14.04 之后要做的一些事 前言: 用 ubuntu14.04 也有一段时间 ...

  6. 34.初识搜索引擎及timeout机制

    主要知识点 1.对搜索执行结果的说明 2.timeout机制讲解 一.对执行 GET /_search 的结果的说明 执行结果如下(只保留部分) { "took": 29, &qu ...

  7. PHP 设计模式之工厂模式 (静态工厂模式)

    ### 工厂模式: 由工厂类根据参数来决定创建出哪一种产品类的实例.工厂类是指包含了一个专门用来创建其他对象的方法的类.所谓按需分配,传入参数进行选择,返回具体的类.工厂模式的最主要作用就是对象创建的 ...

  8. Django admin（四）一些有用定制

    原文:https://www.cnblogs.com/linxiyue/p/4075048.html Model实例,myapp/models.py: 1 2 3 4 5 6 7 8 9 10 11 ...

  9. jquery源码分析(二)——架构设计

    要学习一个库首先的理清它整体架构: 1.jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)(21,94)                定义了一些变量和函数jQu ...

  10. luogu P4726 多项式指数函数(模板题FFT、多项式求逆、多项式对数函数）

    手动博客搬家: 本文发表于20181127 08:39:42, 原地址https://blog.csdn.net/suncongbo/article/details/84559818 题目链接: ht ...