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

废话少说，直接上代码，大家直接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. Why use Cache-Control header in request?

    本地缓存也是缓存代理的一部分. 请求时使用Cache-Control 表示缓存的使用策略. 请求头里的no-cache表示浏览器不想读缓存,并不是说没有缓存.一般在浏览器按ctrl+F5强制刷新时,请 ...

  2. HDU 2267 How Many People Can Survive(广搜，简单)

    题目 //一道简单的广搜水题 #include<queue> #include<stdio.h> #include<string.h> #include<al ...

  3. UNIX C 进程Part2

    1.获取进程ID #include <unistd.h> pid_t getpid(void); //获取子进程id pid_t getppid(void);//获取父进程id 2.获取实 ...

  4. 认识计算机操作系统（day01）

    一.计算机的框架 什么是操作系统?(汽车) 加油系统 油门 用户跟加油子系统交互的窗口.(接口) 方向系统 方向盘 用户跟方向系统的交互接口. 导航系统 ... 汽车的操作系统有很多的子系统来完成.这 ...

  5. NOIP2015 DAY2 T1跳石头

    传送门 题目背景 一年一度的“跳石头”比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起点和终点.在起点和终点之间,有 N 块 ...

  6. Python 3下使用Matplotlib工具画图，中文显示乱码的问题解决

    import matplotlib.pyplot as plt import matplotlib as mpl mpl.rcParams['font.sans-serif']=['SimHei'] ...

  7. MAC 快捷键&使用技巧等

    查看端口占用:命令 lsof -i tcp:port  (port替换成端口号,比如6379)可以查看该端口被什么程序占用,并显示PID,方便KILL    

  8. Hexo系列(一) 搭建博客网站

    写在前面的话:本系列文章主要参考 Hexo官方说明文档,同时结合自己在使用过程中的一些心得体会,撷取下来,和大家分享分享.好,下面闲话不多说,马上开始我们的 Hexo 之旅吧 温馨提醒:博主使用的操作 ...

  9. 3分钟实现小程序唤起微信支付 Laravel教程

    微信支付的接入,如果不使用成熟的开发包,将是巨大的工作量. 依赖 EasyWechat 先在 laravel 项目中依赖 easywechat 这个包 composer require "o ...

  10. Golang - 面对"对象"

    目录 Golang - 面对"对象" 1. 简介 2. 匿名字段 3. 方法 4. 包和封装 5. 接口 4. 包和封装 5. 接口 Golang - 面对"对象&quo ...