JavaScript DOM表单相关操作之相关案例
发布时间：2024年01月23日
之前写了相关的JavaScript DOM表单相关操作，今天根据几个案例一起巩固下吧
1、全选、全不选、反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
<div id="check">
<input type="checkbox" name="dopo" value="斗帝">斗帝
<input type="checkbox" name="dopo" value="斗圣">斗圣
<input type="checkbox" name="dopo" value="斗尊">斗尊
<input type="checkbox" name="dopo" value="斗宗">斗宗
</div>
<button id="all">全选</button>
<button id="not">全不选</button>
<button id="fanxuan">反选</button>
</form>
</body>
<script>
var all = document.getElementById('all');
var not = document.getElementById('not');
var fanxuan = document.getElementById('fanxuan');
var fruit = document.getElementsByTagName('input'); // 所有的复选框
// 绑定全选按钮点击事件
all.onclick = function (){
console.log('all');
// 遍历复选框
for(i=0; i<fruit.length; i++){
fruit[i].checked = true;
}
}
// 绑定全不选按钮点击事件
not.onclick = function (){
// 遍历复选框
for(i=0; i<fruit.length; i++){
fruit[i].checked = false;
}
}
// 绑定反选按钮触发的事件
fanxuan.onclick = function (){
// 遍历复选框的checked属性进行取反
for(i=0;i<fruit.length;i++){
fruit[i].checked = !fruit[i].checked;
}
}
</script>
</html>
2、下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<select id="select1" multiple>
<option>左1</option>
<option>左2</option>
<option>左3</option>
<option>左4</option>
</select>
<span>
<button onclick="toRight()"> >> </button>
<button onclick="toLeft()"> << </button>
</span>
<select id="select2" multiple>
<option>右1</option>
<option>右2</option>
<option>右3</option>
<option>右4</option>
</select>
</body>
<script>
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
// 将左边选中的移动到右边去
function toRight(){
var childs = select1.childNodes; // 获取所有option节点
for(var i=0;i<childs.length;i++){
if (childs[i].selected){
select2.appendChild(childs[i])
}
}
}
// 将右边选中的移动到左边去
function toLeft(){
var childs = select2.childNodes;
for (var i=0;i<childs.length;i++){
if(childs[i].selected){
select1.appendChild(childs[i]);
}
}
}
</script>
</html>
3、城市级联
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<select id="province">
<option>请选择省份</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<select id="country">
<option>请选择区县</option>
</select>
</body>
<script>
var provinceDate = ['河北','河南','湖北','湖南'];
var cityDate = [
['唐山','邯郸','保定','邢台'],
['郑州','开封','洛阳','安阳'],
['武汉','黄石','十堰','宜昌'],
['长沙','株洲','湘潭','衡阳'],
];
var countryDate = [
[
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
],
[
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
],
[
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
['路南区','路北区','开平区','古治区'],
]
];
// 获取三个下拉框对象
var provinceObj = document.getElementById('province');
var cityObj = document.getElementById('city');
var countryObj = document.getElementById('country');
// 把省份循环放到下拉框下
for(var i=0;i<provinceDate.length;i++){
// 创建空的option下拉框
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = provinceDate[i];
provinceObj.appendChild(newOption);
}
// 省份触发的事件
provinceObj.onchange = function (){
cityObj.innerHTML = ''; // 清空城市的下拉框内容
var provinceId = provinceObj.value; //得到当前选中省份的id
var citys = cityDate[provinceId]; // 通过id得到对应的城市
// 把城市循环放到下拉框中
for(var i=0;i<citys.length;i++){
// 创建空的option
var newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = citys[i]; // 设置option文本值
cityObj.appendChild(newOption); // 将option添加到select
}
}
// 城市触发事件
cityObj.onchange = function (){
countryObj.innerHTML = '';
var provinceId = provinceObj.value;
var cityId = cityObj.value;
var countries = countryDate[provinceId][cityId];
// 把城镇循环放到下拉框中
for(var i=0;i<countries.length;i++){
// 创建空的option
newOption = document.createElement('option');
newOption.value = i;
newOption.innerHTML = countries[i];
countryObj.appendChild(newOption);
}
}
</script>
</html>
4、用户注册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form action="https://www.zhishunet.com" onsubmit="return toServer()">
<h3>用户注册</h3>
用户名：<input type="text" name="username" onblur="blurCheck(this)">
<span>首字母为字母，长度为6-10个字符，可以是数字、字母和下划线</span><br><br>
邮箱：<input type="text" name="email" onblur="blurCheck(this)">
<span>正确的邮箱格式</span><br><br>
手机：<input type="text" name="phone" onblur="blurCheck(this)">
<span>中国大陆手机号</span><br><br>
<button type="submit">点击注册</button>
</form>
</body>
<script>
// 定义用于判断的标志
var userFlag = emailFlag = phoneFlag = false;
// 当每一个输入框失去焦点的时候触发这个函数
function blurCheck(obj){
var span = obj.nextSibling; // 得到这个input后面的span对象
if(span.nodeType == 3){ // 过滤掉文本节点
span = span.nextSibling; // 如果是文本节点继续往下找
}
span.style.color = 'red'; // 设置提示信息的字体颜色
var value = obj.value; // 获取输入框中的值
console.log(value);
if(obj.name === 'username'){ // 判断是用户名这个框触发的失去焦点函数
var reg = /^[a-zA-Z]{1}[0-9a-zA-Z_]{6,10}$/; // 定义正则
if(!reg.test(value)){ // 如果验证不通过
userFlag = false;
span.innerHTML = '输入的用户名格式错误请重新输入';
}else{
userFlag = true;
span.style.color = 'green'; // 显示样式设置成绿色
span.innerHTML = '格式正确';
}
}else if(obj.name === 'email'){
var reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
if(!reg.test(value)){
emailFlag = false;
span.innerHTML = '输入的邮箱格式错误，请重新输入';
}else{
emailFlag = true;
span.style.color = 'green'; // 显示样式设置成绿色
span.innerHTML = '格式正确'
}
}else if(obj.name === 'phone'){
var reg = /^1[3|4|5|7|8]\d{9}$/;
if(!reg.test(value)){
phoneFlag = false;
span.innerHTML = '输入的手机格式错误，请重新输入';
}else{
phoneFlag = true;
span.style.color = 'green';
span.innerHTML = '格式正确';
}
}
}
// onsubmit事件调用的函数，用来检查是否允许提交
function toServer(){
if(userFlag && emailFlag && phoneFlag){
return true;
}else{
alert('您的信息填写错误，其nigh检查');
return false;
}
}
</script>
</html>
文章来源:https://blog.csdn.net/weixin_42019349/article/details/135775799
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！
最新文章
- Python教程
- 深入理解 MySQL 中的 HAVING 关键字和聚合函数
- Qt之QChar编码（1）
- MyBatis入门基础篇
- 用Python脚本实现FFmpeg批量转换
- 年终汇报这么写，升值加薪必有你！
- 【04】GeoScene导出海图或者电子航道图000数据成果
- 【免费送书】Java从入门到精通：轻松领会Java程序开发的精髓
- 【华为OD机试真题2023C&D卷 JAVA&JS】分割均衡字符串
- java常用应用程序编程接口（API）——String概述及使用案例
- 【数模百科】一文讲清楚主成分分析PCA算法（附python代码）
- 低代码是美食！！！
- Flowable：BpmnModel API
- 英国允许法官使用ChatGPT写裁决书，并公布官方指南！
- 【SPA详细介绍】