如何在 HTML form 表单提交时验证信息!?

来源:转载

前言:平常老用ajax直接向后台传数据,form 表单不常用都生疏了,今天遇到了一个相关问题,搞了半天,特此记录。

用from表单提交,会遇到一个问题就是,当你点击提交按钮时,直接就把数据传过去了,无法对input表单中的值进行验证,即使可以验证,当不符合验证情况的时候也会把值传过去,这当然不是我们想要的效果,所以..怎么才能验证完成并正确的时候再把值传过去后台呢?

后来,我发现了这个方法:onsubmit=""
onsubmit=”return true” 时点击提交按钮可以提交;
onsubmit=”return false” 时点击提交按钮就不可以提交了;
所以利用这一点,我们就可以做验证,当验证成功之后返回return true 就好了。

下面有个小demo:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src='jquery-1.7.1.min.js'></script></head><body> <form action="" onsubmit="return check()"> 用户名:<input type="text" id='username'><br> 密码:<input type="text" id='password'><br> <input type="submit" value='提交' id='submit'> </form> <script> function check(){ if($('#username').val()==''){ alert('名字不能为空'); return false }else if($('#password').val()==''){ alert('密码不能为空'); return false }else{ return true; } }</script></body></html>

分享给朋友:
您可能感兴趣的文章:
随机阅读: