getelementbyid value_data.reduce is not a function

getelementbyid value_data.reduce is not a function## web前端必学功法之一:表单校验(一)案例效果:![在这里插入图片描述](https://img-blog.csdnimg.cn/20b56fd8fc7c41439df18ad0.gif#pic_c

## 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

(0)
上一篇 2024年 9月 17日
下一篇 2024年 9月 17日

相关推荐

关注微信