JavaScript之表单验证
前言：我们这一次讲的表单验证运用了前面几篇文章说讲的的内容，比之前的要难一些，我会在代码里以注释的形式详细的讲解。
目录
一.简单的表单验证
验证方式一:
验证方式二：
二.正则验证
一.正则的规则
内容
次数
二.正则的注意事项
三.二级联动
一.简单的表单验证
验证方式一:
<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.lengthif (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.lengthif (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.lengthif (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.lengthvar label = obj.parentElement.getElementsByClassName("error")[0]if (length > 0) {//里面有内容//内容在正则匹配之间if (rex.test(obj.value)) {label.textContent = "😊"return true}//不在区间之内label.textContent = tipreturn 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=""//输入框和下拉框可以拿到valuesetCity(province.value)}
</script>
</body>
</html>运行结果：
好了，这篇文章到处结束了，期待我们下一篇文章相见(￣▽￣)"