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>



目录
相关文章
|
10月前
|
人工智能 前端开发 物联网
|
JavaScript 前端开发
前端基础 - JQuery自定义校验器
前端基础 - JQuery自定义校验器
88 0
|
8月前
|
移动开发 前端开发 JavaScript
|
10月前
|
JavaScript 前端开发 安全
jQuery 第十一章(表单验证插件推荐)
jQuery 第十一章(表单验证插件推荐)
117 1
|
10月前
|
JavaScript 前端开发 安全
使用JavaScript实现动态表单验证(下)
使用JavaScript实现动态表单验证
|
10月前
|
前端开发 JavaScript 安全
使用JavaScript实现动态表单验证(上)
使用JavaScript实现动态表单验证
|
自然语言处理 JavaScript 前端开发
javaScript-06 表单验证 详细易懂,加案例分析
javaScript-06 表单验证 详细易懂,加案例分析
143 0
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
70 0
|
JavaScript 前端开发 UED
如何用JavaScript实现表单验证
在Web开发中,表单验证是非常重要的一部分。通过表单验证,可以保证用户输入的数据格式正确,有效地避免后端数据异常。在本文中,我们将介绍如何使用JavaScript实现表单验证。
166 0
|
前端开发 数据安全/隐私保护
react入门—实现复杂表单方法的封装以及表单验证功能的实现(表单验证方法的封装优化)
在前端开发中,表单验证是很常见的功能,这边文章就来讲一下react入门实现复杂表单的功能,以及表单验证功能的实现
474 0
react入门—实现复杂表单方法的封装以及表单验证功能的实现(表单验证方法的封装优化)