目录
表单介绍:
一个表单由三个部分组成
表单标签:包含数据提交到服务器的方法
表单域:包含文本框、密码框、文本域、复选框、单选按钮、下拉按钮等
表单按钮:一般就是提交按钮
建立表单
<form action="" onsubmit="return check()"> //在提交时会返回一个参数
<p>名字:<input type="text" id="uname"/> //名字输入框
<span><i class="error"></i></span></p> //名字提示信息
<p>密码:<input type="text" id="upwd"/> //密码输入框
<span><i class="error"></i></span></p> //密码提示信息
<p>邮箱:<input type="text" id="uemail"/> //邮箱输入框
<span><i class="error"></i></span></p> //邮箱提示信息
<p><button type="button">登录</button></p> //表单中的按钮会默认识别为提交按钮
当需要拿到输入框的值去做验证时可以用到一下方法
onkey
up//键盘松开 可以准确检测到按下的每一个键
onkeydown//键盘按下 第一个按下的键不会被检测到
onkeypress// 当键盘完成一次敲击时
注意:当需要准确拿到键盘每一次输入的值是应使用 onkeyup
正则判断
格式:
/^&/ //匹配规则 使用方法:方法名.test()//括号里面放需要匹配的正则
正则表达式常用的属性,长度与次数
\d 数字[0-9]
\D 非数字 ^[0-9]
\w 数字+英文+下划线 [0-9a-zA-Z]
\W 非数字+英文+下划线 ^[0-9a-zA-Z]
. 任意字符? 0-1次
+ 至少一次
* 0-任意次
\d{5} 五个数字
\d{5,10} 最少五次,最多10次
案例
对用户名,密码框,邮箱输入的值进行判断(使用正则)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province" onchange="myChange()"></select>
<select id="cities"></select>
<script>
//JS数组特点:
//类型不限制
//长度不限制
//数组可以是字符串
var provinces=[]
//城市
provinces["湖南省"]=["长沙市","岳阳市","株洲市"]
provinces["云南省"]=["昆明市","曲靖市","玉溪市"]
provinces["河北省"]=["石家庄","张家口","邯郸市"]
//获得省份
// for of 相当于foreach 遍历元素
// for in 遍历下标
for(let i in provinces){
//往省份的下拉框中添加选项
//<option value="i">i</option>
province.appendChild(new Option(i,i))
}
//获得省份下的城市
function setCity(name) {
for(let i of provinces[name]){
cities.appendChild(new Option(i,i))
}
}
setCity(province.value)
function myChange() {
//清空原来的选项
cities.innerHTML=""
//输入框 和 下拉框
setCity(province.value)
}
</script>
</body>
</html>
二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select name="" id="privence" onchange="myChange()">
</select>
<select id="cities">
</select>
<script >
var a=[]
a["湖南省"]=["长沙","岳阳","株洲"]
a["河北省"]=["石家庄","荆州","张家口"]
a["云南省"]=["昆明","大理","洱海","德州"]
for(let i in a){
privence.appendChild(new Option(i,i))
console.log(i)
}
function setCity(a1){
for(let i of a[a1]){
cities.appendChild(new Option(i,i))
}
}
setCity(privence.value)
function myChange() {
//清空原来的选项
cities.innerHTML=""
//输入框 和 下拉框
setCity(privence.value)
}
</script>
</body>
</html>
敢不敢用一年时间改变自己