JavaScript的综合案例

案例要求：

实现一个表单验证

1.当输入框失去焦点时，验证输入的内容是否符合要求

2.当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不符合要求阻止表单提交

简单的页面实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>欢迎注册</title>
</head>
<body><h1>欢迎注册</h1><form action="#" id="register"><table><tr><td>用户名</td><td><input type="text" name="username" id="username" ><!-- 先设置为隐藏格式 --><span id="uwername_err" style="display: none;" >用户名不符合规则</span></td></tr><tr><td>密码</td><td><input type="password"  name="password" id="password"><span id="password_err" style="display: none;" >密码不符合规则</span></td></tr><tr><td>电话</td><td><input type="text" name="tel" id="tel"><span id="tel_err" style="display: none;" >电话不符合规则</span></td></tr></table><input type="button" value="提交"></form></body>
</html>

1.当输入框失去焦点时，验证输入的内容是否符合要求

我们先设置用户名的事件，当鼠标离焦该元素时，触发函数

<tr><td>用户名</td><td><!-- //给用户框元素绑定一个离焦事件，当鼠标离开该元素就触发函数 --><input type="text" name="username" id="username" onblur="checkUsername()"><!-- 先设置为隐藏格式 --><span id="uwername_err" style="display: none;" >用户名不符合规则</span></td></tr>

checkUsername函数的实现

 <script>function checkUsername(){//获取用户框输入的值let usernameValue= document.getElementById("username").value;//创建正则对象// let regex=new RegExp("^\\w{6,10}$");let regex=/^\w{6,10}$/;//判断输入的值是否符合正则if(regex.test(usernameValue)){
//重现设置为隐藏document.getElementById("uwername_err").style.display="none";return true;}else{//不满足，把用户名的span标签显示出来document.getElementById("uwername_err").style.display="block";document.getElementById("uwername_err").style.color="red";//阻止表单提交return false;}}</script>

结果：

设置密码的绑定事件

 <tr><td>密码</td><td><input type="password"  name="password" id="password" onblur="checkPassword()"><span id="password_err" style="display: none;" >密码不符合规则</span></td></tr>

checkPassword函数

   <script>function checkPassword(){//获取密码框输入的值let passwordValue=document.getElementById("password").value;//创建正则对象let regex=/^.{6,12}$/;//判断是否满足if(regex.test(passwordValue)){//满足，把密码的span标签内容隐藏document.getElementById("password_err").style.display="none";//提交表单return true;}else{//不满足document.getElementById("password_err").style.display="block";document.getElementById("password_err").style.color="red";return false;}}
</script>

设置电话的绑定事件

<tr><td>电话</td><td><input type="text" name="tel" id="tel" onblur="checkTel()"><span id="tel_err" style="display: none;" >电话不符合规则</span></td></tr>

checkTel函数

 <script>function checkTel(){//获取电话框输入的值let telValue=document.getElementById("tel").value;//创建正则对象let regex=/^1[3-9]\d{9}$/;if(regex.test(telValue)){document.getElementById("tel_err").style.display="none";return true;}else{//不满足document.getElementById("tel_err").style.display="block";document.getElementById("tel_err").style.color="red";return false;}}
</script>

2.当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不符合要求阻止表单提交

我们现在实现的功能有一个框不符合规则也可以提交数据成功

<script>
//给form表单绑定提交事件document.getElementById("register").onsubmit=function(){//三个框只要有一个非法就组织表单提交return checkPassword()&&checkTel()&&checkUsername();}
</script>
说明：onsubmit的匿名函数返回false就不提交数据

结果：有一个不符合，就不提交数据

说明：全部符合，才提交数据