前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。
目录
一.简单的表单验证
验证方式一:
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
font-weight: bold;//字体粗细
}
</style>
</head>
<body>
<form action="" id="myForm">
//onkey(键)，onkeyup当键被点击
<p>名字: <input type="text" id="userName" onkeyup="checkName(this)"><span id="l1"></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkPwd(this)"><span id="l2"></span></p>
<p>邮箱: <input type="text" id="userEmail" onkeyup="checkEmail(this)"><span id="l3"></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//用来检查名字是否合规
function checkName() {
/*定义一个值拿到姓名输入框值的长度*/
var length = userName.value.length
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间（定义值的长度）
if (length >= 3 && length <= 6) {
l1.textContent = "😊"
return true
}
//不在区间之内
l1.textContent = "长度必须在3-6之间"
//必须return一个值，否则会被覆盖，return有中断的作用
return false
}
//里面没有内容
l1.textContent = "长度必须大于0"
return false
}
//用来检查密码是否合规
function checkPwd() {
var length = userPwd.value.length
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
l2.textContent = "😊"
return true
}
//不在区间之内
l2.textContent = "长度必须在3-6之间"
return false
}
//里面没有内容
l2.textContent = "长度必须大于0"
return false
}
//用来检查邮箱是否合规
function checkEmail() {
var length = userEmail.value.length
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
l3.textContent = "😊"
return true
}
//不在区间之内
l3.textContent = "长度必须在3-6之间"
return false
}
//里面没有内容
l3.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
//有两种方法
//第一种：return checkName()&&checkPwd()&&checkEmail()
//第二种：
var f1 = checkName()
var f2 = checkPwd()
var f3 = checkEmail()
return f1 && f2 && f3
}
</script>
</body>
</html>验证方式二：
这是上面代码的优化
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form action="" id="myForm">
<p>名字: <input type="text" id="userName" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
<p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this)"><span><i class="error"></i></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//用来检查是否合规
function checkLabel(obj) {
var length = obj.value.length
//input标签和span标签都在p标签里，它们是兄弟关系，可以获得下一个相邻元素
// var label=obj.nextElementSibling
//在span标签里加一个i标签，可以获得i标签父级元素相邻的上一个元素
var label = obj.parentElement.getElementsByClassName("error")[0]
if (length > 0) {//里面有内容
//名字的大小应该在 3-6 之间
if (length >= 3 && length <= 6) {
label.textContent = "😊"
return true
}
//不在区间之内
label.textContent = "长度必须在3-6之间"
return false
}
//里面没有内容
label.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
// return checkName()&&checkPwd()&&checkEmail()
var f1 = checkLabel(userName)
var f2 = checkLabel(userEmail)
var f3 = checkLabel(userPwd)
return f1 && f2 && f3
}
</script>
</body>
</html>运行结果：
二.正则验证
我相信各位小伙伴们应该都知道正则表达式，但我还是要讲一下， 正则表达式又称规则表达式，它是对字符串操作的一种逻辑公式，即用事先定义好的一些特定字符以及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。
正则表达式可以用来做什么?
给定一个正则表达式和另一个字符串，我们可以达到如下的目的：
1. 检查给定的字符串是否符合正则表达式的过滤逻辑，即能否匹配；
2. 可以通过正则表达式的匹配，从字符串中提取或替换特定的部分。
一.正则的规则
内容
| \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次（数字任意填 |
二.正则的注意事项
| 必须以/^开头 |
| 必须以$/结尾 |
| 不要把\写成\\ |
| 定义正则对象(例如)： var rex=/^\d{5}$/ |
| 使用正则对象(例如)： rex.test('123') |
接下来我们用正则来写一个简单验证
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<form action="" id="myForm">
<p>名字: <input type="text" id="userName" onkeyup="checkLabel(this,/^[a-zA-Z]{3,6}$/,'名字的长度在3-6')"><span><i class="error"></i></span></p>
<p>密码: <input type="text" id="userPwd" onkeyup="checkLabel(this,/^\w{6,10}$/,'密码的长度在6-10')"><span><i class="error"></i></span></p>
<p>邮箱: <input type="text" id="userEmail" onkeyup="checkLabel(this,/^\w+[.]\w+@\w+[.]\w+$/,'邮箱中必须包含@')"><span><i class="error"></i></span></p>
<p>
<button>登录</button>
</p>
</form>
<script>
//用来检查是否合规
//括号里是传入的值
function checkLabel(obj,rex,tip) {
var length = obj.value.length
var label = obj.parentElement.getElementsByClassName("error")[0]
if (length > 0) {//里面有内容
//内容在正则匹配之间
if (rex.test(obj.value)) {
label.textContent = "😊"
return true
}
//不在区间之内
label.textContent = tip
return false
}
//里面没有内容
label.textContent = "长度必须大于0"
return false
}
//添加提交事件(会具备返回值)
myForm.onsubmit = () => {
//阻止表单的提交 需要返回 false
// return checkName()&&checkPwd()&&checkEmail()
var f1 = checkLabel(userName)
var f2 = checkLabel(userEmail)
var f3 = checkLabel(userPwd)
return f1 && f2 && f3
}
</script>
</body>
</html>三.二级联动
二级联动这个词听起来是不是很高级，但是它其实在我们的生活中很常见，下面这个代码你们一看就知道它是什么了o(TヘTo)
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
//select 下拉框，provinces 省份，onchange 改变事件
<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){
//往省份的下拉框中添加选项
//appendChild 追加子节点
//<option value="i">i</option>
//第一个i是value的值，第二个i是显示的值
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=""
//输入框和下拉框可以拿到value
setCity(province.value)
}
</script>
</body>
</html>运行结果：
好了，这篇文章到处结束了，期待我们下一篇文章相见(￣▽￣)"
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
