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

web表单提交前用JavaScript验证

2016-09-01 13:30 357 查看

网上一大堆了，自己做个笔记。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">

function check(form){
if (form.userid.value=="") {
alert("请输入用户名");
form.userid.focus();
return false;
}

if (form.pws.value=="") {
alert("请选择密码");
form.psw.focus();
return false;
}

return true;
}
</script>
</head>
<body>

<div class="container">
<form action="#" method="get" name="form">

<div class="form-group">
<label class="col-sm-2 control-label">用户名：</label>
<div class="col-sm-10">
<input type="text" name="userid" id="userid" class="form-control">
</div>
</div>

<div class="form-group">
<label class="col-sm-2 control-label">
密码：
</label>
<div class="col-sm-10">
<select class="form-control" name="psw" id="psw" >
</select>
</div>
</div>

<input <span style="color:#FF0000;">onclick="return check(this.form)"</span> type="submit" name="" class="btn btn-info" value="修改保单">

</form>
</div>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

增加一个单选框验证吧！！

function check(form){
var count=0;
var radios=document.getElementsByName("Policy_Code");

for(var i=0;i<radios.length;i++){
if (radios[i].checked==true) {
count++;
}
}

// document.write(count);

if (count) {
return true;

}else{
alert("请选择产品");
return false;
}

}

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

标签：

相关文章推荐

新的分享

章节导航