关于jQuery表单校验的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单校验</title>
<meta name="author" content="Administrator" />
<script type="text/javascript" src="script/jquery-1.12.2.js"></script>
<style type="text/css">
.int {
margin-bottom: 5px;
}
.sub {
padding-left: 7%;
}
</style>
<!-- Date: 2016-04-03 -->
</head>
<body>
<form action="" method="post">
<div class="int">
<label for="username">用户名：</label>
<input type="text" id="username" class="required" />
</div> <div class="int">
<label for="email"> 邮箱：</label>
<input type="text" id="email" class="required" />
</div> <div class="int">
<label for="personinfo">个人资料</label>
<input type="text" id="personinfo" />
</div> <div class="sub">
<input type="submit" value="提交" id="send" />
<input type="reset" id="res" />
</div>
</form>
<script type="text/javascript">
$(function() {
//为必填的内容加*。
$("form :input.required").each(function() {
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
//为每个文本框失去焦点时做校验。
$("form :input").blur(function() {
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if($(this).is("#username")){
if(this.value==""||this.value.length<6){
var errorMsg = "请输入至少6位的用户名。";
$parent.append("<span class='formtips onError'>"+ errorMsg+"</span>");
}else{
var okMsg = "输入正确";
$parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
}
}
//验证邮箱
if($(this).is("#email")){
if(this.value==""||(this.value!=""&& !/.+@.+\.[a-zA-Z] {2,4}$/.test(this.value))){
var errorMsg = "请输入正确的邮箱地址。";
$parent.append("<span class='formtips onError'>"+ errorMsg+"</span>");
}else{
var okMsg = "请输入正确的邮箱地址。";
$parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>");
}
}
});
});
</script>
</body>
</html>
关于jQuery表单校验的应用的更多相关文章
- 关于jQuery表单校验
<style> .red{border: 1px solid red;} .wrong-tip{color: red;} </style> <form action=&q ...
- day32(表单校验js和jquery表单校验)
校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...
- JQuery -- Validate, Jquery 表单校验
1. Jquery 表单验证需要插件 jQuery validation 1.7 ---验证插件需要:jQuery 1.3.2 或 1.4.2版本 http://jquery.bassistance ...
- jQuery表单校验
主要特性: 表单提交前对所有数据进行校验,不符合不让提交(validate) 如果表单校验不通过,自动focus到第一个错误的域 自动在控件后面显示错误提示内容(error message) 支持根据 ...
- JQuery 表单校验插件 validate 使用纪录
JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...
- jquery 表单校验
<link type="text/css" href="<%=basepath%>css/form/validate.css" rel=&qu ...
- Jquery表单验证插件validate
写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
随机推荐
- 读取App.config自定义标签的值
一:程序截图 二:具体代码 config配置: <?xml version="1.0" encoding="utf-8" ?> <config ...
- IIS6.0服务器搭建网站无法访问解决方法
IIS6.0服务器搭建网站无法访问解决方法 IIS6.0服务器搭建网站无法访问解决方法很多朋友在用IIS6架网站的时候遇到不少问题,而这些问题有些在过去的IIS5里面就遇到过,有些是新出来的, ...
- Nodejs in Visual Studio Code 12.构建单页应用Scrat实践
1.开始 随着前端工程化深入研究,前端工程师现在碉堡了,甚至搞了个自己的前端网站http://div.io/需要邀请码才能注册,不过里面的技术确实牛.距离顶级的前端架构,目前博主应该是far away ...
- FATE（完全背包）
/* http://acm.hdu.edu.cn/showproblem.php?pid=2159 分析: 和普通的完全背包没有什么太大的区别 但是题目中给出了限制最多可杀s个怪 用二维数组dp[i] ...
- 《Mathematical Olympiad——组合数学》——抽屉原理
抽屉原理可以说是组合数学中最简单易懂的一个原理了,其最简单最原始的一个表达形式:对于n本书放到n-1个抽屉中,保证每个抽屉都要有书,则必存在一个抽屉中有2本书.但是这个简单的原理在很多问题中都能够巧妙 ...
- sql server2008 搭建链接服务器成功后查询时报Cannot obtain the schema rowset "DBSCHEMA_TABLES_INFO" for OLE DB provider "SQLNCLI10" for linked server "XXXXX". 的解决方法
这是由于链接的数据库服务器的版本与本地数据库服务器不一致,有人说要升到sp3,sp4,然后在执行什么语句之类的 我觉得太繁琐了,通过网上查询之后看到可以这么做: USE master GRANT EX ...
- Hibernate二 映射 注解 一级缓存
Hibernate映射1.@Entity 被该注解修饰的POJO类是一个实体,可以用name属性指定该实体类的名称,系统默认以该类的类名作为实体类的名称.2.@Table 指定持久化类所映射的表,它的 ...
- 跨平台通信中间件thrift学习【Java版本】（转）
转自:http://neoremind.com/2012/03/%E8%B7%A8%E5%B9%B3%E5%8F%B0%E9%80%9A%E4%BF%A1%E4%B8%AD%E9%97%B4%E4%B ...
- linux —— ubuntu 初次安装问题
本文收集了我自己安装ubuntu系统时的一些想法和遇到的一些问题,以及一些我自己感兴趣的软件的安装方法等 1. 50G ubuntu 分区方案 <plan> <key> / & ...
- dubbo源码分析二：服务发布
本文将深入分析dubbo的服务发布涉及到的流程及主要类的代码.首先,我们先从类的关系图来看一下dubbo发布服务涉及到的相关类. 1.类图 上图展示了部分服务发布过程中需要使用到的类和接口,其中: s ...