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

废话少说，直接上代码，大家直接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. QT设计UI：QT模式对话框打开文件

    使用QT模式对话框,并使显示框 为背景色: 方法使用了QCheckBox *native;   #include <QCheckBox> 初始化函数代码: //设置默认打开图像位置 nat ...

  2. （转）基于MVC4+EasyUI的Web开发框架经验总结（10）--在Web界面上实现数据的导入和导出

    http://www.cnblogs.com/wuhuacong/p/3873498.html 数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,我曾经在 ...

  3. Hadoop 使用小命令（2）

    一.查看一堆文件共有多少行 查看file1/file2目录下所有文件总共多少行 hadoop fs -text file1/file2/* | wc -l 二.正则表达式 hadoop fs -tex ...

  4. codeforces 466B Wonder Room（思维，暴力）

    题目 参考了别人的博客,百度来的博客 #include<iostream> #include<string> #include<stdio.h> #include& ...

  5. js数组对象去重

    转: https://www.cnblogs.com/gaoht/p/9850449.html 在数组对象中去掉重复的对象: export function deteleObject(obj) { v ...

  6. python项目开发：用RabbitMQ实现异步RPC

    程序要求: 1. 用Rabbit MQ实现RPC 1. 可以异步地执行多条命令 2. 可以对一次性对多个机器执行命令 程序效果: --->run dir host1 host2 .... --- ...

  7. springboot整合mybatis统一配置bean的别名

    mybatis.type-aliases-package=cn.byzt.bean 只需要将 javaBean 的路径配置到 springboot 的配置文件中,这里如果是多个路径,用英文逗号分隔多个 ...

  8. 用windows远程桌面连接ubuntu

    从Windows 7远程到Windows系统比较简单,只要对方电脑开启远程桌面功能就可以了,但Windows 7远程桌面连接到Ubuntu 14.04比较复杂一点,具体操作步骤如下. Ubuntu 1 ...

  9. Linux拖拽上传文件 lrzsz

    首先安装lrzsz 命令为:yum install lrzsz 安装完毕后直接将.tar.gz格式的文件拖如xshell的窗口内就会自动上传.

  10. BZOJ 3329 Xorequ (数位DP、矩阵乘法)

    手动博客搬家: 本文发表于20181105 23:18:54, 原地址https://blog.csdn.net/suncongbo/article/details/83758728 题目链接 htt ...