Jquery 组 表单验证
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</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="sub">
<input type="submit" value="提交" id="send"/>
<input type="reset" value="重置" id="res"/>
</div>
</form>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("form :input.required").each(function(){
// 先清除已经加上的
var $required=$("<strong style='color:red' 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 erroMsg='请输入至少6位的用户名.';
$parent.append('<span class="formtips onError" >'+erroMsg+'</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 eerroMsg='请输入正确的E-Mail地址.';
$parent.append('<span class="formtips onError" >'+eerroMsg+'</span>')
}else{
var eokMsg='输入正确.';
$parent.append('<span class="formtips onSuccess" >'+eokMsg+'</span>')
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
// 触发事件,全部再检验一次
$('#send').click(function(){
$("form .required:input").trigger('blur');
var numError=$('form .onError').length;
if(numError){
return false;
}
alert("注册成功,密码已经发到你的邮箱,请查收。");
})
// trigger() 方法触发被选元素上指定的事件以及事件的默认行为(比如表单提交)。
// 该方法与 triggerHandler() 方法类似,不同的是 triggerHandler() 不触发事件的默认行为。
// 与 triggerHandler() 方法相比的不同之处:
// 它不会引起事件(比如表单提交)的默认行为
// .trigger() 会操作 jQuery 对象匹配的所有元素,而 .triggerHandler() 只影响第一个匹配元素。
// 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡;如果目标元素不直接处理它们,则不会发生任何事情。
</script>
</html>
Jquery 组 表单验证的更多相关文章
- jQuery formValidator表单验证插件
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- 【锋利的jQuery】表单验证插件踩坑
和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在f ...
- jquery实现表单验证简单实例
/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将 ...
- jQuery的表单验证
jQuery的表单验证 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- Jquery 实现表单验证,所有验证通过方可提交
1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
随机推荐
- k8s监控api调用
k8s监控api调用 curl -s --cacert /etc/kubernetes/ssl/ca.pem -basic -u fengjian:fengjian --insecure -X GET ...
- maven 仓库配置 pom中repositories属性
文章转自http://blog.csdn.net/zlgydx/article/details/51130627 什么是Maven仓库在不用Maven的时候,比如说以前我们用Ant构建项目,在项目目录 ...
- nodejs中引用其他js文件中的函数
基本语句 require('js文件路径'); 使用方法 举个例子,在同一个目录下,有app.fun1.fun2三个js文件. 1. app.js var fun1 = require('./fun1 ...
- Java Web 项目目录结构
为了使 Web 容器顺利地执行 Web 应用,开发者需要以一种标准的方式将 Web 项目中的资源(Servlets.JSP 等)打包.一个 Web 项目的目录结构可分为两种: 发布目录结构 Web 容 ...
- 扫描Linux服务器查找恶意软件和rootkit的一款工具
官网参考官网安装教程:wget https://www.clamav.net/downloads/production/clamav-0.101.1.tar.gztar -zxvf clamav-0. ...
- MySQL 基础十 性能优化
1.优化sql 2.建立索引 3.优化表结构,避免多个join查询
- Oracle ORA-01940: 无法删除当前连接的用户
当我们要删除一个oracle的用户时,如果有其他人连接到数据库则会报以下错误: ORA-01940: 无法删除当前连接的用户 处理办法就是:将连接到当前用户的session给kill掉. 处理步骤如下 ...
- Luogu3220 HNOI2012 与非 数位DP
传送门 题意:给出$N$个范围在$[0,2^k-1]$的整数,定义位运算$NAND$为位运算$AND$的逆运算,求$[L,R]$中有多少数能成为若干个前面给出的整数.若干括号和$NAND$运算组成的表 ...
- C#创建自己的扩展方法
C#可以创建自己的扩展方法Extension Method: 参考这篇<判断是否为空然后赋值>http://www.cnblogs.com/insus/p/8004097.html 里,前 ...
- 《Head First 设计模式》例子的C++实现(5 单例模式)
最近在学习设计模式,用的是 <Head First 设计模式>这本书.感觉这本书写的还是很不错的,深入浅出的介绍了各种常用的设计模式.唯一有点不方便的地方是这本书的例子全都是用的 Java ...