JavaScript.正则与表单验证_js表单验证题目:利用 javascript 和正则表达式实现表单验证。具体要求:(1)用户名-CSDN博客

本文链接：https://blog.csdn.net/qq_63130170/article/details/123317512

JavaScript.正则与表单验证.06

表单：感念

表单验证是JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。

本期大纲：

在这里插入图片描述

简单验证

使用String类型来对数据格式进行判断

完成用户名和密码的验证

长度最大为10

给出未填写提示

//先创建一个表单
<form action="" id="myForm">
    //里面写两个输入框
    //p 标签 做跨行作用
    <p>用户名：<input type="text" id="name" required/></p>
    <p>密码：<input type="text" id="pwd" required/></p>
//弹框提示 required
</form>

效果：

在这里插入图片描述

给出判断提示

//定义一个函数
用上面刚刚定的名字
myForm.onsubmit=()=>{
// 定义一个数据
var s1=name.value
//然后判断 if
if(s1.length==0){//如果里面一个数都没写 则弹出
l1.textContent="请输入用户名"

}
}

正则验证

使用正则表达式来对数据格式进行判断

正则的规则

内容

\d 数字 [0-9]

\D 非数字 ¹
\w 数字+英文+下划线 [0-9a-zA-Z_]
\W 非数字+英文+下划线 ²
. 任意字符
次数
? 0~1次
+ 至少一次
* 0~任意次
\d{5} 五个数字
\d{5,10} 最少五次，最多10次

正则的注意事项
- 规则必须以/^开头
- 规则必须以&/结尾
- 规则只需要\d,而不是\d
- 定义正则对象: var rex=/^\d{5}$/
- 使用正则对象：rex.test(‘123’)
正则的使用

添加失去焦点事件
1. 用户名是否为字母全小写,且位数在5~10位

密码可以是数字+英文+.,且位数在5~10位
挑战：实现密码等级显示
有小写字母,等级加一
有大写字母,等级加一
有数字,等级加一
有.,等级加一

3. 邮箱验证

www.wsdsg@foxmail.com
```
\w+[.]\w+@\w+[.]\w+
```

图

在这里插入图片描述

wsdsg@foxmail.com

\w+@\w+[.]\w+

3. 二级联动

先建两个下拉框 select

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<select id="">
		<option value ="1">湖南省</option>
		<option value ="1">南南省</option>
	</select>
	<select id="">
		<option value ="2">长沙市</option>
		<option value ="2">郴州市</option>
	</select>
	</body>
</html>

源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<select id="province" onchange="myChange()"></select>
	<select id="cities"></select>
	<script type="text/javascript">
		var provinces=[]
		//城市
		provinces[1]=["长沙","郴州"]
		provinces[3]=["八卦","嘎嘎"]
		//当代码执行到这一步给省份赋值
		//for循环
		//of就相当于 foreach 遍历元素
		// in 遍历下标  
		for(let i in provinces){
		//往省份的下拉框中添加选项
		//这里的两个 i 一个是value 还有一个 是显示的值
		provinces.appendChild(new Option(i,i))//追加子节点
		
		}
		//城市
		function setCity(name){
			for(let i of provinces[name]){
				cities.appendChild(new Option(i,i))
			}
		}
		setCity(provinces.value)
		function myChange(){
			//刷新清空
			cities.innerHTML=""
			setCity(province.value)
			}
	</script>
	</body>
</html>