使用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 ...
随机推荐
- iOS学习笔记（7）——解析json中的中文
NSURL *url = [NSURL URLWithString:@"http://nycode.sinaapp.com/d.php"]; NSError *error = ni ...
- 10分钟教你用Python打造微信天气预报机器人
01 前言 最近武汉的天气越来越恶劣了.动不动就下雨,所以,拥有一款好的天气预报工具,对于我们大学生来说,还真是挺重要的了.好了,自己动手,丰衣足食,我们来用Python打造一个天气预报的微信机器人吧 ...
- Springboot接口简单实现生成MySQL插入语句
Springboot接口简单实现调用接口生成MySQL插入语句 在实际测试中,有这样一个需求场景,比如:在性能压力测试中,可能需要我们事先插入数据库中一些相关联的数据. 我们在实际测试中,遇到问题,需 ...
- TX2 i2c-tools使用
安装: apt-get install libi2c-dev i2c-tools 检测i2c总线数目 用i2cdetect检测有几组i2c总线在系统上: i2cdetect -l 可以看到系统中有9组 ...
- 使用NHibernate（1）--资料汇总
NHibernate最新版本是4.0,目前还只是alpha版,没有发布.稳定版本是3.3,项目中用的也是这个版本,所以以后的介绍都是基于这个版本的. 在网上找了一下相关的学习资料,现汇总如下: NHi ...
- (转)CentOS 7 下 MySQL 5.7 配置 Percona Xtrabackup
CentOS 7 下 MySQL 5.7 配置 Percona Xtrabackup 原文:http://qizhanming.com/blog/2017/05/10/install-percona- ...
- Linux系统编程：文件I/O编程
文件I/O操作在Linux编程时是经常会使用到的一个内容,通常可以把比较大的数据写到一个文件中来进行存储或者与其他进程进行数据传输,这样比写到一个全局数组或指针参数来实现还要方便好多. 一.文件常用操 ...
- Eclipse/MyEclipse按任何键，都可以提示?（最强帮手）
说明: 一般在Eclipse ,MyEclipse代码里面,打个foreach,switch等这些,是无法得到代码提示的(不信自己试试),其他的就更不用说了,而在Microsoft Visual St ...
- 关于js语法（运算中出现无限大的问题）本身的错误的解决方案
错误原因: 一是 JavaScript 浮点数计算的 Bug, 另一个是和计算机最终转换成二进制计算有关系 解决方案: 第一种就是利用JavaScript 的toFixed(n) 方法,直接获取N 位 ...
- Linux网络编程--多线程实现echo服务器与客户端“一对多”功能，是网络编程的“Hello World!”
在linux平台下,用多线程实现echo服务器与客户端“一对多”(即是一台服务器可以响应多个客户端的请求).本人写了个demo,和大家一起分享,有不足的地方,请多多指教,我是壮壮熊. 编译时,在后面加 ...