modernizr框架之表单验证

简介: 框架下载地址:http://modernizr.com/ 案例: <!DOCTYPE html><html> <head> <script src="http://code.jquery.com/jquery-1.7.1.js"></script> <script src="http://

框架下载地址:http://modernizr.com/


案例:

<!DOCTYPE html>
<html> 
  <head>
    <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/modernizr/1.7/modernizr-1.7.min.js">
    </script>
 
    <script type="text/javascript">
       $(function(){
			  if( !Modernizr.input.required ){
			    var $msg = $( "<div id='reqMessage'>Required Fields Missing</div>" );
			    $msg.css( "background-color", "yellow" )
			        .hide();
			   
			    $( "body" ).append( $msg );
			 
			    $( "#fDet" ).on( "submit", function(e){
						      $( "input[required]" ).each(function(){
								        if ( $( this ).val() === "" ) {
								          $( "#reqMessage" ).show();
								          $( this ).css( "border" , "1px solid red" );
								          e.preventDefault();
								        }   
						      }); 
			    });
			  }
}); 
</script>
</head>
<body>
<form id="fDet" action="#">
<input type="text" name="userName" required/>
<input type="password" name="password" required/>
<input type="submit" value="send it" />
</form>
</body>
</html>



目录
相关文章
|
5月前
|
人工智能 前端开发 物联网
|
5月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
96 1
|
10月前
ElementUI之CUD+表单验证
ElementUI之CUD+表单验证
45 0
|
11月前
|
前端开发 关系型数据库 API
关于一篇ElementUI之CUD+表单验证
关于一篇ElementUI之CUD+表单验证
48 0
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
54 0
Yii2.0框架中如何进行表单验证?有哪些内置的验证器?
Yii2.0框架中如何进行表单验证?有哪些内置的验证器?
135 0
|
前端开发 数据安全/隐私保护
react入门—实现复杂表单方法的封装以及表单验证功能的实现(表单验证方法的封装优化)
在前端开发中,表单验证是很常见的功能,这边文章就来讲一下react入门实现复杂表单的功能,以及表单验证功能的实现
442 0
react入门—实现复杂表单方法的封装以及表单验证功能的实现(表单验证方法的封装优化)
Laravel 表单验证 使用技巧
Laravel 表单验证 使用技巧
136 0
|
数据采集 数据安全/隐私保护 开发者
普通的表单验证 | 学习笔记
快速学习普通的表单验证
109 0
|
前端开发 JavaScript
jQuery 表单验证扩展(五)
大概在一个月之前,自己尝试着写一个jQuery的表单验证插件,当初的目的并不是为了让这个插件流行起来,只是为了自己学习的需要。由于工作的问题,这个问题一直处于停留的状态。前些天报名参加了那个什么博客大赛,最近未写一篇博客,当然本文也不是了参加什么博客大赛而写,只是作为自己学习的积累。
1230 0