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

废话少说，直接上代码，大家直接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. sql 导入excel 遇到问题

    ALTER TABLE tab1 add id int identity primary key (注意:必须加identity,否则添加会失败) //导入excel时候 先把主键去掉 变为可为空,之 ...

  2. python 生成测试报告并发送邮件

    前言: 使用unittest编写自动化测试脚本,执行脚本后可以很方便看到测试用例的执行情况. 但如果想向领导汇报工作,就需要提供更直观的测试报告. 思路: 使用unittest编写测试用例,HTMLT ...

  3. java操作Excel的poi 格式设置

    格式设置 package com.java.poi; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi. ...

  4. PAT_A1108#Finding Average

    Source: PAT A 1108 Finding Average (20 分) Description: The basic task is simple: given N real number ...

  5. [系统资源攻略]IO第一篇-磁盘IO,内核IO概念

    几个基本的概念 在研究磁盘性能之前我们必须先了解磁盘的结构,以及工作原理.不过在这里就不再重复说明了,关系硬盘结构和工作原理的信息可以参考维基百科上面的相关词条--Hard disk drive(英文 ...

  6. Google HTML/CSS Style Guide

    转自: http://google.github.io/styleguide/htmlcssguide.xml Google HTML/CSS Style Guide Revision 2.23 Ea ...

  7. [jzoj 5778]【NOIP提高A组模拟2018.8.8】没有硝烟的战争 (博弈论+dp)

    传送门 Description 被污染的灰灰草原上有羊和狼.有N只动物围成一圈,每只动物是羊或狼. 该游戏从其中的一只动物开始,报出[1,K]区间的整数,若上一只动物报出的数是x,下一只动物可以报[x ...

  8. 继续聊WPF——设置网格控件列标题的样式

    我很奇怪的是,微软那厮是怎么搞的,Blend里面居然不能编辑GridView的样式,十万般无奈之下,只好手写XAML来处理了. 要想知道一个控件的样式是如何设置,看控件类的定义很重要,我们来看看Gri ...

  9. 【Codeforces 639A】Bear and Displayed Friends

    [链接] 我是链接,点我呀:) [题意] [题解] 时刻维护一下前K大的数字就好. 因为k<=6 然后数字不会减少只会增加. 因此只要维护一个大小为k的数组就ok. 保证这个数组是有序的. 写个 ...

  10. （14）Spring Boot定时任务的使用【从零开始学Spring Boot】

    本文介绍在 Spring Boot 中如何使用定时任务,使用非常简单,就不做过多说明了. com.kfit.base.scheduling.SchedulingConfig: package com. ...