## web前端必学功法之一:表单校验(一)
案例效果:
![在这里插入图片描述](
https://img-blog.csdnimg.cn/20b56fd8fc7c41439df18ad0.gif#pic_center)
这里的布局采用的是bootstrap布局
“`html
<div class=”container” style=”margin-top: 60px;”>
<!– 表单 –>
<form class=”form-horizontal” role=”form” id=”myform”>
<!– 姓名文本框 –>
<div class=”form-group”>
<label for=”userName” class=”col-sm-2 control-label”>名字</label>
<div class=”col-sm-8″>
<input type=”text” class=”form-control” id=”userName” name=”userName” placeholder=”请输入姓名”>
</div>
</div>
<!– 密码密码框 –>
<div class=”form-group”>
<label for=”userPwd” class=”col-sm-2 control-label”>密码</label>
<div class=”col-sm-8″>
<input type=”password” class=”form-control” id=”userPwd” name=”userPwd” placeholder=”请输入密码”>
</div>
</div>
<!– 年龄数值框 –>
<div class=”form-group”>
<label for=”userAge” class=”col-sm-2 control-label”>年龄</label>
<div class=”col-sm-8″>
<input type=”number” class=”form-control” id=”userAge” min=”1″ max=”100″ name=”userAge” placeholder=”请输入年龄”>
</div>
</div>
<!– 性别复选框 –>
<div class=”form-group”>
<label for=”userSex” class=”col-sm-2 control-label”>性别</label>
<div class=”col-sm-8″>
<label class=”checkbox-inline”>
<input type=”checkbox” name=”userSex” value=”男”> 男
</label>
<label class=”checkbox-inline”>
<input type=”checkbox” name=”userSex” value=”女”> 女
</label>
<label class=”checkbox-inline”>
<input type=”checkbox” name=”userSex” value=”未知”> 未知
</label>
</div>
</div>
<!– 爱好复选框 –>
<div class=”form-group”>
<label for=”userHobby” class=”col-sm-2 control-label”>爱好</label>
<div class=”col-sm-8″>
<label class=”checkbox-inline”>
<input type=”checkbox” name=”userHobby” value=”唱歌”> 唱歌
</label>
<label class=”checkbox-inline”>
<input type=”checkbox” name=”userHobby” value=”睡觉”> 睡觉
</label>
<label class=”checkbox-inline”>
<input type=”checkbox” name=”userHobby” value=”敲代码”>敲代码
</label>
</div>
</div>
<!– 城市下拉框 –>
<div class=”form-group”>
<label for=”userCity” class=”col-sm-2 control-label”>城市</label>
<div class=”col-sm-8″>
<select class=”form-control” id=”userCity” name=”userCity”>
<option value=””>-请选择-</option>
<option value=”上海”>上海</option>
<option value=”广州”>广州</option>
<option value=”深圳”>深圳</option>
<option value=”北京”>北京</option>
</select>
</div>
</div>
<!– 简介文本域 –>
<div class=”form-group”>
<label for=”userRemark” class=”col-sm-2 control-label”>简介</label>
<div class=”col-sm-8″>
<textarea class=”form-control” name=”userRemark” rows=”3″ id=”userRemark”></textarea>
</div>
</div>
<div class=”form-group”>
<div class=”col-sm-offset-2 col-sm-10″>
<button type=”button” class=”btn btn-default” id=”submitBtn”>提交</button>
<span id=”msg” style=”color: red;”></span>
</div>
</div>
</form>
</div>
“`
要求:
1.验证姓名
1)不能为空 2)长度为6-12位
2.验证密码
1)不能为空 2)长度为6-12位 3)不能包含姓名
3.验证年龄
1)不能为空 2)范围在1-100之间
4.验证性别
必须选择一项
5.验证爱好
必须选择一项
6.验证城市
必须选择一项
满足条件
1)弹出所有的内容 2)提交表单
不满足条件
1)说错误原因 2)不提交表单
思路分析:
1.绑定事件,绑定提交按钮的事件
2.获取表单素:通过选择器获取
3.判断条件:根据要求判断对应的表单素的值是否满足
4.提交表单:调用表单的submit()
实现步骤:
1.绑定提交按钮的事件
2.获取每个素的值
3.判断对应的表单素是否满足条件
4.如果不满足条件,则显示错误原因
5.如果满足条件,弹出内容,提交表单
“`javascript
<script>
// 表单校验
//1.绑定提交按钮的事件
document.getElementById(“submitBtn”).onclick = function(){
//2.获取每个表单素的值
// 验证姓名
// 1)不能为空 2)长度为6-12位
// 获取姓名
var userName = document.getElementById(“userName”).value;
// 1)不能为空
if(isEmpty(userName)){
document.getElementById(“msg”).innerHTML = “姓名不能为空!”;
return;
}
// 2)长度为6-12位
if(userName.length < 6 || userName.length > 12){
document.getElementById(“msg”).innerHTML = “姓名的长度在6-12位之间”;
return;
}
// 2.验证密码
// 1)不能为空 2)长度为6-12位 3)不能包含姓名
var userPwd = document.getElementById(“userPwd”).value;
// 1)不能为空
if(isEmpty(userPwd)){
document.getElementById(“msg”).innerHTML = “密码不能为空!”;
return;
}
// 2)长度为6-12位
if(userPwd.length < 6 || userPwd.length > 12){
document.getElementById(“msg”).innerHTML = “密码的长度在6-12位之间”;
return;
}
// 3)不能包含姓名 indexOf();判断字符串中是否包含指定值,如果不包含则返回-1
if(userPwd.indexOf(userName) != -1){
document.getElementById(“msg”).innerHTML = “密码中不能包含姓名在内”;
}
// 验证年龄
// 1)不能为空 2)范围在1-100之间
var userAge = document.getElementById(“userAge”).value;
// 1)不能为空
if(isEmpty(userAge)){
document.getElementById(“msg”).innerHTML = “年龄不能为空!”;
return;
}
// 2)范围在1-100之间
if(userAge <1 || userAge > 100){
document.getElementById(“msg”).innerHTML = “年龄范围在1-100之间”;
return;
}
// 验证性别
// 必须选择一项
//获取性别
var userSex = “”;
//获取性别单选框
var radios = document.getElementsByName(“userSex”);
//遍历,得到被选中的值
for(var i = 0;i<radios.length; i++){
//判断是否选中
if(radios[i].checked){
userSex = radios[i].value;
}
}
// 1)不能为空
if(isEmpty(userSex)){
document.getElementById(“msg”).innerHTML = “请选择性别!”;
return;
}
// 5.验证爱好
// 必须选择一项
var userHobby = “”;
var checkboxs = document.getElementsByName(“userHobby”);
//遍历,得到被选中的值
for(var j = 0;j<checkboxs.length;j++){
//判断是否被选中
if(checkboxs[j].checked){
//拼接爱好
userHobby += checkboxs[j].value + “,”;
}
}
// 1)不能为空
if(isEmpty(userHobby)){
document.getElementById(“msg”).innerHTML = “请选择爱好!”;
return;
}
//截取字符串,去除最后多余的“,”;
userHobby = userHobby.substring(0,userHobby.length – 1);
// 验证城市
// 必须选择一项
// 获取城市
var userCity = document.getElementById(“userCity”).value;
// 1)不能为空
if(isEmpty(userCity)){
document.getElementById(“msg”).innerHTML = “请选择城市!”;
return;
}
//获取简介
var userRemark = document.getElementById(“userRemark”).value;
//满足条件,则清空提示信息
document.getElementById(“msg”).innerHTML = “”;
//弹出所有的内容
var str = “姓名:” + userName + “\n密码:” + userPwd + “\n”;
str +=”年龄:” + userAge + “\n性别:” + userSex + “\n”;
str +=”爱好” + userHobby + “\n城市” + userCity +”\n”;
str +=”简介” + userRemark;
alert(str);
// 设置表单提交的地址
document.getElementById(“myform”).action = “http://www.baidu.com”;
//提交表单
document.getElementById(“myform”).submit();
}
// 封装一个方法,用来进行非空判断
// 判断字符串是否为空
// 如果为空,返回true,
// 如果不为空,返回false
// trim():去除字符串前后空格
function isEmpty(str){
if(str == null || str.trim() ==””){
return true;
}
return false;
}
</script>
“`
2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/16979.html