码迷,mamicode.com
首页 > 其他好文 > 详细

modernizr框架之表单验证

时间:2015-05-17 18:48:20      阅读:104      评论:0      收藏:0      [点我收藏+]

标签:modernizr   jquery   

框架下载地址: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>



modernizr框架之表单验证

标签:modernizr   jquery   

原文地址:http://blog.csdn.net/luozhonghua2014/article/details/45789827

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!