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运行试下,先睹为快.猛戳链接--> ...
随机推荐
- 《OKR工作法》读书笔记(转)
文章转自https://www.jianshu.com/p/c694363d5213
- CVE-2018-14634 - Linux create_elf_tables()中的整型溢出 - 翻译
原文:https://seclists.org/oss-sec/2018/q3/274 摘要 Qualys研究实验室的安全团队发现一个位于Linux内核函数create_elf_tables()中的整 ...
- Bellman_ford模板
参考博客: https://blog.csdn.net/u011893609/article/details/81232124 https://blog.csdn.net/bestsort/artic ...
- 分布式RPC框架性能大比拼 dubbo、motan、rpcx、gRPC、thrift的性能比较
Dubbo 是阿里巴巴公司开源的一个Java高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和 Spring框架无缝集成.不过,略有遗憾的是,据说在淘宝内部,dub ...
- this computer meets the requirements for HAXM,but intel Virtualization Technology (VT-x) is not turned on
this computer meets the requirements for HAXM,but intel Virtualization Technology (VT-x) is not turn ...
- 数据库隔离级别深入理解(ORACLE)
TRANSACTION_READ_UNCOMMITTED 1 这种隔离级别最低,脏读,不可重复读,幻读都会发生,我用的oracle,并没有支持这个级别,不作研究. TRANSACTION_READ_C ...
- cc攻击和ddos攻击的区别和攻防 + 调SYN连接参数
1.一个是WEB网络层拒绝服务攻击(DDoS),一个是WEB应用层拒绝服务攻击(CC),网络层就是利用肉鸡的流量去攻击目标网站的服务器,针对比较本源的东西去攻击,服务器瘫痪了,那么运行在服务器上的网站 ...
- ASP.NET Core中如果Response.HasStarted已经为true,就不能更改Response.Cookies和Response.Headers等属性的值了
最近我在ASP.NET Core中做了一个中间件CustomizedMiddleware,要说该中间件的功能也很简单,其实就是往HttpResponse中添加一个Cookie而已,但是我将添加Cook ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- [Oracle][OnlineREDO]数据库无法启动时的对应策略:
[Oracle][OnlineREDO]数据库无法启动时的对应策略: 1. Start with mount. SQL> conn / as sysdba SQL> startup mo ...