使用jQuery的validation插件实现表单校验
前端表单校验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单校验（使用validation插件实现）</title>
<script src="../jslib/jquery-1.11.0.js"></script>
<script src="../jslib/jquery.validate.js"></script>
<script src="../jslib/messages_zh.js"></script> <script>
$(function () {
$("#formid").validate({
rules:{
username:{
required:true
},
password:{
required:true,
rangelength:[6,10]
},
repassword:{
required:true,
equalTo:"[name='password']"
},
height:{
required:true,
min:[180]
},
age:{
required:true,
range:[18,56]
}
},
messages:{
username:{
required:"不能为空"
},
password:{
rangelenght:"密码长度必须在在6-10个字符之间"
},
height:{
min:"身高必须在180以上"
},
age:{
range:"年龄必须在在18岁到56岁之间"
}
}
});
});
</script>
</head>
<body>
<form id="formid" action="#"> <!--不能为空-->
用户名：<input type="text" name="username"/> <br/> <!--长度在6-10个字符之间-->
密码：<input type="text" name="password"/> <br /> 重复密码：<input type="text" name="repassword"/> <br /> <!--大于180cm-->
身高：<input type="text" name="height"/> <br /> <!--在18岁到56岁之间-->
年龄：<input type="text" name="age"/> <br /> 邮箱：<input type="text" name="email"/> <br /> <input type="submit" value="提交"/>
</form>
</body>
</html>
使用jQuery的validation插件实现表单校验的更多相关文章
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
- jQuery的validation插件(验证表单插件)
更完整的参考:http://www.runoob.com/jquery/jquery-plugin-validate.html 验证隐藏字段的使用(验证通过后ajax提交表单):http://www. ...
- 【JAVAWEB学习笔记】28_jqueryAjax：json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- 【JAVAWEB学习笔记】28_jquery加强：json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(Jav ...
- 使用jquery.validate.js插件进行表单里控件的验证
jsp中具体实现的代码: <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- JQuery插件使用之Validation 快速完成表单验证的几种方式
JQuery的Validation插件可以到http://plugins.jquery.com/上去下载.今天来分享一下,关于这个插件的使用. 简易使用 这第一种方式可谓是傻瓜式的使用,我们只需要按照 ...
- JQuery中内容操作函数、validation表单校验
JQuery:内容体拼接(可以直接拼接元素节点和内容节点) JQuery实现: 方案1:A.append(B); == B.appendTo(A);A的后面拼接B 方案2: A.prepend(B); ...
- jQuery Label Better – 友好的表单输入框提示插件
jQuery Label Better 帮助你标记您的表单输入域,带有美丽的动画效果而且不占用空间.这个插件的独特之处在于所有你需要做的就是添加一个占位符文本,只有当用户需要它的时候才显示标签. 您可 ...
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...
随机推荐
- windows环境下ElasticSearch5以上版本安装head插件
我的ElasticSearch版本是5以上的,网上搜了好多安装方式,都不对. 还好找到一个成功的,转载过来做记录. 原文地址:ElasticSearch-5.0安装head插件 步骤 下载node.j ...
- nginx实现动静分离--附nginx配置文件详解
转自http://www.cnblogs.com/1214804270hacker/p/9299462.html 一.认识访问静态资源与访问动态资源的区别 静态资源:指存储在硬盘内的数据,固定的数据, ...
- 5. STL编程五
1. STL的六大组件: 容器(Container) 算法(Algorithm) 迭带器(Iterator) 仿函数(Function object) 适配器(Adaptor) 空间配置器(alloc ...
- CentOS7基础建站指南（笔记）
由于前段时间腾讯云打折,所以买了一台小服务器,想着以后写几个小网站,博客什么的,但是一开始就遇到了难题,大概就是Linux服务器的配置问题,比如如何假设服务器,配置非root用户,配置服务器数据的非r ...
- leetcode-849-到最近的人的最大距离
题目描述: 在一排座位( seats)中,1 代表有人坐在座位上,0 代表座位上是空的. 至少有一个空座位,且至少有一人坐在座位上. 亚历克斯希望坐在一个能够使他与离他最近的人之间的距离达到最大化的座 ...
- JS设计模式之单体模式（Singleton）
单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对 ...
- eNSP 模拟器添加loopback本地回环口
eNSP只能模拟华为的设备,通常情况下数据通信的传递范围仅限于eNSP中的设备之间. 有时我们在学习更多技术,比如希望将eNSP跟VMware Workstation里的虚拟机互通,或者想让eNSP里 ...
- 【GIS新探索】GeoHash原理和编解码实现
1.什么是GeoHash geohash基本原理是将地球理解为一个二维平面,将平面递归分解成更小的子块,每个子块在一定经纬度范围内拥有相同的编码.不好理解,没关系,我来找个图. 就像上面这张图,一个坐 ...
- Altium Designer安装孔周围放置圆形Polygon Pour Cutout
1. 在Keep-Out层画2个圆, 中间的圆用作安装孔, 外圆做为禁止覆铜层. 这样做的好处是,放好安装孔后, 外面禁止覆铜层也覆不上铜, 防止螺钉与覆铜接触. 2. 选中外圆, Tools -& ...
- normalize.css源码解析
什么是normalize.css? 它是为了帮助我们统一各个浏览器的样式和消除bug的css库. 为什么需要normalize.css,有什么好处? 不像一些reset.css,normalize. ...