表单验证提交内容不能为空的⼏种⽅法
⽅法⼀：
使⽤css的required属性
<input type="" required="required" name="" id="" value=""/>
⽅法⼆：
使⽤JS代码⽰例，注意事项：form要加上onSubmit事件，vlaue要在表单中对应name
<script type="text/javascript">
function beforeSubmit(form){
if(form.username.value==''){
alert('⽤户名不能为空！');
form.username.focus();
return false;
}
if(form.password.value==''){
alert('密码不能为空！');
form.password.focus();
return false;
}
if(form.password.value.length<6){
alert('密码⾄少为6位，请重新输⼊！');
form.password.focus();
return false;
}
if(form.password.value!=form.password2.value) {
alert('你两次输⼊的密码不⼀致，请重新输⼊！');
form.password2.focus();
return false;
}
return true;
}
</script>
<fieldset>
<legend>⽤户注册</legend>
<form method="post" name="form" action="user.do?method=register" onSubmit="return beforeSubmit(this);">
<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr><td><label>⽤户名：<input type="text" name="username" value=""></label></td></tr>
<tr><td><label>密码：<input type="password" name="password" value=""></label></td></tr>
<tr><td><label>重复密码：<input type="password" name="password2" value=""></label></td></tr>
<tr><td><input value="注册" type="submit"><input type="reset" value="重置"></td></tr>
</table>
</form>
</fieldset>
⽅法三：
使⽤jQuery⽅法（通过class验证），需要引⽤jquery.min.js
优势：
1：为input添加class，名字可以随意设置，但每个input需要保持⼀致，本章案例calss设置为noNull。（若input已有class属性，可直接加到其后）
2：为input添加⼀个属性，⽤来后期通过jquery获取该字段，⽤作提⽰语。本章案例提⽰属性为notNull。
3：通过jQuery遍历页⾯中所有calss为noNull的表单，验证其是否为空，若为空，通过获取notNull的字段，进⾏为空提⽰。
具体如何设置，请参照下⾯的案例。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<form>
<!-- input -->
<div>
姓名: <input type="text" name="name"  notNull="姓名" class="form-control noNull"> </div>
<br>
<!-- radio -->
<div>
htmlradio的text出不来性别:
男<input type="radio" name="sex" value="0" class="noNull" notNull="性别">
⼥<input type="radio" name="sex" value="1">
</div>
<br>
<!-- select -->
<div>
年龄：
<select name="age" class="noNull" notNull="年龄">
<option value ="">请选择</option>
<option value ="1">1</option>
<option value ="2">2</option>
</select>
</div>
<br>
<!-- checkbox -->
<div>
兴趣：
打球<input type="checkbox" name="hobby" value="1" class="noNull" notNull="兴趣">唱歌<input type="checkbox" name="hobby" value="2">
跳舞<input type="checkbox" name="hobby" value="3">
</div>
<br>
<button type="button" class="btn-c" onclick="bubmi()">保存</button>
</form>
<script src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function bubmi(){
$(".noNull").each(function(){
var name = $(this).attr("name");
if($(this).val()==""){
alert($(this).attr('notNull')+"不能为空");return false;
}
if($(this).attr("type")=="radio"){
if ($("input[name='"+name+"']:checked").size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
if($(this).attr("type")=="checkbox"){
if ($('input[name="'+name+'"]:checked').size() < 1){
alert($(this).attr('notNull')+"不能为空!");
return false;
}
}
})
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。