表单校验 点击登陆按钮的时候,触发验证
2017-05-03 14:37
302 查看
<title>休闲网登录页面</title> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <style type="text/css"> * { padding: 0; margin: 0; } body { font-size: 12px; color: #000; line-height: 25px; } .main { float: none; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; clear: both; } #header { background-image: url(./images/bg.gif); background-repeat: repeat-x; height: 36px; } #headerLeft { width: 200px; float: left; } #headerRight { width: 160px; float: right; color: #FFF; } #center { width: 362px; text-align: center; margin-top: 20px; margin-right: auto; margin-bottom: 20px; margin-left: auto; } .bg { background-image: url(图片/dl_l_bg.gif); background-repeat: repeat-y; } .inputs { width: 110px; height: 16px; border: solid 1px #666666; } .bold { font-size: 18px; font-weight: bold; text-align: center; line-height: 45px; height: 40px; } .rb1 { height: 20x; color: #fff; font-size: 13px; background: #d32c47; padding: 3px 10px; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #6a6a6a; border-bottom: 1px solid #6a6a6a; cursor: pointer; } #footer { text-align: center; color: #333; line-height: 35px; } #footer a { color: #333; text-decoration: underline; } #footer hover { color: #333; text-decoration: none; } </style>
<script type="text/javascript"> //第一步;当我点击登录按钮的时候,提交表单,也就是将表单中打有name属性的标签的value值提交到表单 function checkEmail(){ var flag=true; //1.锁定对象 var dom=$("[id=email]"); //yymqqc@126.com //2.判定是否包含@ 和. var value=dom.val(); if(value.indexOf("@")==-1){ alert('邮箱中必须包含@'); flag=false; } if(value.indexOf(".")==-1){ alert('邮箱中必须包含.'); flag=false; } return flag; } $(function(){ var myform=$("form"); myform.submit(function(){ return checkEmail(); }); }); </script> </script>
<body> <div id="header" class="main"> <div id="headerLeft"> <img src="图片/logo.gif" /> </div> <div id="headerRight">注册 | 登录 | 帮助</div> </div> <div class="main"> <table id="center" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="图片/dl_l_t.gif" /></td> </tr> <tr> <td class="bg"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="bold">登录休闲网</td> </tr> <form action="day08shangke2.html" method="post" id="myform" name="myform"> <tr> <td>Email:<input id="email" type="text" name="email" class="inputs" /></td> </tr> <tr> <td> 密码:<input id="pwd" type="password" name="pwd" class="inputs" /></td> </tr> <tr> <td style="height: 35px; padding-left: 30px;"><input id="btn" type="submit" value="登录" class="rb1" /></td> </tr> </form> </table> </td> </tr> <tr> <td><img src="images/dl_l_b.gif" width="362" height="5" /></td> </tr> </table> </div> <div id="footer" class="main"> <a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a> | <a href="#">帮助中心</a> </div> </body>
相关文章推荐
- html5中input的新类型(验证只有在点击提交按钮的时候才触发)
- 移动端点击某个按钮触发的时候,出现点击状态的方法
- 在事件触发的时候,有时我们需要一些模拟用户行为的操作。例如:当网页加载完毕后 自行点击一个按钮触发一个事件,而不是用户去点击。
- asp.net中的按钮在页面上有验证控件的时候不触发按钮事件
- Android下listview每个Item中包含有按钮,为什么在点击某一行按钮的时候,同时有多行button触发了响应事件?
- 点击某些按钮不要触发验证控件
- iOS11 导航栏按钮出现点击触发不灵敏(触发面积变小)
- WPF中button按钮同时点击多次触发click解决方法
- css去除页面点击链接、按钮触发的虚线框
- jquery ajax上传文章且依靠点击其他按钮触发f o r m 表单中的file型的input框
- jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
- js实现监听button按钮点击事件触发file点击事件
- tableView中添加按钮触发不了点击事件的解决办法
- 在HTML页面上点击按钮按钮携带参数flag,触发一个JS函数,经过判断是否flag==1,分别跳到两个指定的方法(或者页面)
- 在winform中给GridView加checkbox在按钮点击的时候获取选中的checkbox
- 重写默认的CGridView 点击“删除”按钮触发的脚本
- 点击按钮的时候,输入框不获得焦点
- angularjs——总结(验证错误在ul中显示,点击按钮数量增加,批量删除,增加)
- JS 兼容IE 、 火狐的按钮点击触发
- ListView控件的列表项的文字不满一行的时候,如何实现点击该列表项的空白区域仍可触发列表项的点击事件