jQuery Validate前端验证
我们经常看到如下效果，那么它是如何实现的呢？看下面：
废话少说，直接上代码，大家直接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前端验证的更多相关文章
- 关于引入多个jquery冲突的问题（附一个很好用的validate前端验证框架及使用方法）
废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...
- 封装jQuery Validate扩展验证方法
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- jquery validate remote验证唯一性
jquery.validate.js 的 remote 后台验证 之前已经有一篇关于jquery.validate.js验证的文章,还不太理解的可以先看看:jQuery Validate 表单验证(这 ...
- jquery validate扩展验证方法
/***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...
- 扩展jquery.validate自定义验证，自定义提示，本地化
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- 1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.
1)jquery validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...
- jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- 使用tooltip显示jquery.validate.unobtrusive验证信息
通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = " ...
- jQuery Validate Ajax 验证
jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...
随机推荐
- AI 的会议总结（by南大周志华）
原文链接:http://blog.csdn.net/akipeng/article/details/6533897 这个列的更详细:http://www.cvchina.info/2010/08/31 ...
- 【sqli-labs】 less18 POST - Header Injection - Uagent field - Error based (基于错误的用户代理，头部POST注入)
这次username和password都进行了输入校验 但是ip和uagent没有校验 当我们用admin admin登陆成功后,就会一条插入语句 由于程序无条件的信任了浏览器的header信息,那么 ...
- NET MVC FileResult 导出/下载 文件/Excel
参考http://www.cnblogs.com/ldp615/archive/2010/09/17/asp-net-mvc-file-result.html 1.引入NPOI 2.代码 using ...
- JSP_内置对象_请求转发和请求重定向的区别
请求重定向:客户端行为,response.sendRedirect(),从本质上将等同与两次请求,前一次请求request对象不会保存,地址栏的URL地址会改变. 请求转发:服务器行为,request ...
- spring cloud(五) hystrix
开启feign 熔断 hystrix 整合hystrix-dashboard监控面板 1. 服务调用者boot工程 pom引入依赖 <!-- hystrix-dashboard 监控依赖 ...
- 【剑指Offer】62、二叉搜索树的第k个结点
题目描述: 给定一棵二叉搜索树,请找出其中的第k小的结点.例如(5,3,7,2,4,6,8) 中,按结点数值大小顺序第三小结点的值为4. 解题思路: 本题实际上比较简单,主要还是考察对 ...
- while(Thread.activeCount() > 1)
今天看到深入理解JVM第367页多线程volatile部分照着书本敲着代码发现了一个问题 Thread.activeCount()会一直大于2 public class VolatileTest { ...
- Idea 类注释和方法注释
类注释 先打开Settings > Editor > File and Code Templates Includes Includes File Header 再随机新建个类就有类注释 ...
- VS2015 C++ 获取 Edit Control 控件的文本内容，以及把获取到的CString类型的内容转换为 int 型
UpdateData(true); //读取编辑框内容,只要建立好控件变量后调用这个函数使能,系统就会自动把内容存在变量里 //这里我给 Edit Control 控件创建了一个CString类型.V ...
- 【Codeforces Round #519 by Botan Investments C】 Smallest Word
[链接] 我是链接,点我呀:) [题意] [题解] 模拟了一两下.. 然后发现. 对于每一个前缀. 组成的新的最小字典序的字符串 要么是s[i]+reverse(前i-1个字符经过操作形成的最大字典序 ...