JavaScript06.表单验证

回顾:JavaScript05.JS与css交互

目录

用JS实现简单验证

正则验证

正则表达式规则

正则表达式注意事项

正则的运用

实现二级联动

---

用JS实现简单验证

想实现表单验证，首先我们得需要表单

<form action="" onsubmit="return check()">    //在提交时会返回一个参数
			<p>名字:<input type="text" id="uname"/>    //名字输入框
			<span><i class="error"></i></span></p>     //名字提示信息
			<p>密码:<input type="text" id="upwd"/>     //密码输入框(type应该为password,此处为了方便显示所以也使用text)
			<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>    //表单中的按钮会默认识别为提交按钮
            //当点击此按钮会返回一个boolean类型,成功为true,失败为false
</form>

做简单验证实质就是每次输入内容时调用某个函数做到验证,我们有以下几个事件可以使用:

onkeydowm 当键盘按下时

onkeyup 当键盘弹回时

onkeypress 当键盘完成一次敲击时

完成表单验证时,我们最好使用onkeyup当键盘按下时文本内容刚增加,此时还检测不到输入框是否给到值,只有弹回时,才检测得到输入框的内容,当键盘完成一次敲击同理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
	</head>
	<body>
		<form id="myForm">
			<p>名字:<input type="text" id="uname" onkeyup="checkin(this)"/>
			<span><i class="error"></i></span></p>
			<p>密码:<input type="text" id="upwd" onkeyup="checkin(this)"/>
			<span><i class="error"></i></span></p>
			<p>邮箱:<input type="text" id="uemail" onkeyup="checkin(this)"/>
			<span><i class="error"></i></span></p>
			<p><button type="button">登录</button></p>
		</form>
		
		<script type="text/javascript">
			function checkin(obj){
				var length=obj.value.length	//得到input标签值的长度
				var label =obj.parentElement.getElementsByClassName("error")[0]		//通过input标签父类得到error标签
				if(length>0){	//判断input标签是否有内容
					if(length>=3&&length<=6){	//判断input标签值得长度是否满足3到6
						label.textContent="√"	//如果满足条件则让error标签显示√
						return true
					}
					label.textContent="长度必须在3-6之间"		//如果不在区间内,则输出这句话,并且返回false
					return false
				}
				label.textContent="长度必须大于0"		//如果input标签无内容
				return false
			}
		myForm.onsubmit=()=>{
			//如果需要阻止表单提交则要返回false
			var f1=checkin('uname')
			var f2=checkin('upwd')
			var f3=checkin('uemail')
			return f1&&f2&&f3
		}
		</script>
	</body>
</html>

这样就可以实现表格的简单判断 

正则验证

正则表达式规则：

内容方面：

1. \d 数字[0-9]
2. \D 非数字 ^[0-9]
3. \w 数字+英文+下划线 [0-9a-zA-Z]
4. \W 非数字+英文+下划线 ^[0-9a-zA-Z]
5. . 任意字符

次数方面：

1. ？ 0-1次
2. + 至少一次
3. * 0-任意次
4. \d{5} 五个数字
5. \d{5,10} 最少五次，最多10次

正则表达式注意事项:

1. 规则必须以/^开头

2. 规则必须以$/结尾

3. 规则只需要\d，而不是\\d

4. 定义正则对象：var rex=/^\d{5}$/

5. 使用正则对象：rex.test("321")

正则的运用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--
为什么需要使用正则!!!! 表单验证
-->
<!--<form action="" onsubmit="return check()">-->
<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>

实现二级联动

<!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>

 你要尽全力保护你的梦想。那些嘲笑你梦想的人，他们注定失败，他们想把你变成和他们一样。我坚信，只要心中有梦想，我就会与众不同。你也是。