您的位置：首页 > Web前端 > HTML

如何在 HTML form 表单提交时验证信息！？

2017-12-25 17:24 309 查看

前言：平常老用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<
4000
/span>="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航