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

废话少说，直接上代码，大家直接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. Vue 爬坑之路—— 使用 Vuex + axios 发送请求

    Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios  ...

  2. python tips:匿名函数lambda

    lambda用于创建匿名函数,下面两种函数定义方式等价. f = lambda x: x + 2 def f(x): return x + 2 立刻执行的匿名函数 (lambda x: print(x ...

  3. Python 字符串常用方法 day2

    1.去空格和换行符: s = ' a bc ' print(s.strip())#strip(),去掉字符串两边的空格和换行符,无法去除中间的空格 print(s.rstrip())#rstrip() ...

  4. 【剑指Offer】19、顺时针打印矩阵

      题目描述:   输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依 ...

  5. Centos7从3.10升级内核到4.9后无法启动解决办法:mpt[23]sas驱动问题

    Centos7升级内核后无法启动解决办法:mpt[23]sas驱动问题 前言 这个问题存在有一段时间了,之前做的centos7的ISO,在进行内核的升级以后就存在这个问题: 系统盘在板载sata口上是 ...

  6. [APIO2018]铁人两项 [圆方树模板]

    把这个图缩成圆方树,把方点的权值设成-1,圆点的权值设成点双的size,算 经过这个点的路径的数量*这个点的点权 的和即是答案. #include <iostream> #include ...

  7. 1.2、使用pip安装Python包

    大多数 Python 包都使用 pip 实用工具安装,使用 virtualenv 创建虚拟环境时会自动安装 pip.激活虚拟环境后,pip 所在的路径会被添加进 PATH. 注:如果你在 Python ...

  8. JavaScript对接百度地图api实现地图标点功能

    粗略的做了个地图标点功能 首先,去百度注册开发者账号,然后进入到百度地图开放平台 进入到控制台, 创建浏览器端应用,给个安全域名 然后去开发者文档JavaScript里面找地图展示文档,直接怼上去就行 ...

  9. hdu 2089 数位dp入门题

    #include<stdio.h> //dp[i][0]代表不存在不吉利数字 //dp[i][1]代表不存在不吉利数字但是以2开头 //dp[i][2]代表存在不吉利数字 #define ...

  10. CodeForces - 340 C - Tourist Problem

    先上题目: A - Tourist Problem Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...