一、实现简单的form表单验证的封装方法，代码如下： html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> input{outline: none;} .warn{ margin-left: 20px; color: red; } </style> </head> <body> <form > <div class="box"> <div class="item"> <label>姓名：</label> <input type="text" name="name"> </div> <div class="item"> <label>电话：</label> <input type="text" name="tel"> </div> <div class="item"> <label>邮箱：</label> <input type="text" name="email"> </div> <button>确定</button> </div> </form> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script> $(function(){ //将验证内容封装到一个方法里 function checkForm(){ //验证姓名 var name = $('input[name="name"]'); if(!$.trim(name.val())){ name.focus().css('border','1px solid red'); name.after('<span class="warn">姓名不能为空</span>') return false; } //验证电话 var tel = $('input[name="tel"]'); if(!$.trim(tel.val())){ tel.focus().css('border','1px solid red'); tel.after('<span class="warn">电话不能为空</span>') return false; } //验证邮箱 var email = $('input[name="email"]'); if(!$.trim(email.val())){ email.focus().css('border','1px solid red'); email.after('<span class="warn">邮箱不能为空</span>') return false; } return true;//验证通过返回true } $(':input').on('keyup',function(){ $(this).css('border','1px solid #ccc'); $(this).closest('.item').find('span').html(''); }); $('button').on('click',function(e){ e.preventDefault(); if(!checkForm()) return false; alert('验证通过干点啥呢~~~') }) }) </script> </body> </html>
评论 (3 )
最新评论
你提交方式有问题 我点击提交直接提交到前端网了没有有验证的效果
有好的方法？
效率一般吧。$(":input")是啥？从没用过。。。