js表单验证案例
糖葫芦零零七 人气:0需求
有如下注册页面,对表单进行校验,如果输入的用户名、密码、手机号符合规则,则允许提交;如果不符合规则,则不允许提交。
完成以下需求:
1、当输入框失去焦点时,验证输入内容是否符合要求
2、当点击注册按钮时,判断所有输入框的内容是否都符合要求,如果不合符则阻止表单提交
环境准备
下面是初始页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎注册</title> <link href="../css/register.css" rel="stylesheet"> </head> <body> <div class="form-div"> <div class="reg-content"> <h1>欢迎注册</h1> <span>已有帐号?</span> <a href="#" >登录</a> </div> <form id="reg-form" action="#" method="get"> <table> <tr> <td>用户名</td> <td class="inputs"> <input name="username" type="text" id="username"> <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span> </td> </tr> <tr> <td>密码</td> <td class="inputs"> <input name="password" type="password" id="password"> <span id="password_err" class="err_msg" style="display: none">密码格式有误</span> </td> </tr> <tr> <td>手机号</td> <td class="inputs"><input name="tel" type="text" id="tel"> <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span> </td> </tr> </table> <div class="buttons"> <input value="注 册" type="submit" id="reg_btn"> </div> <br class="clear"> </form> </div> <script> </script> </body> </html>
验证输入框
此小节完成如下功能:
校验用户名。当用户名输入框失去焦点时,判断输入的内容是否符合 长度是 6-12 位
规则,不符合使id='username_err'
的span标签显示出来,给出用户提示。
校验密码。当密码输入框失去焦点时,判断输入的内容是否符合 长度是 6-12 位
规则,不符合使 id='password_err'
的span标签显示出来,给出用户提示。
校验手机号。当手机号输入框失去焦点时,判断输入的内容是否符合 长度是 11 位
规则,不符合使 id='tel_err'
的span标签显示出来,给出用户提示。
代码如下:
//1. 验证用户名是否符合规则 //1.1 获取用户名的输入框 var usernameInput = document.getElementById("username"); //1.2 绑定onblur事件 失去焦点 usernameInput.onblur = function () { //1.3 获取用户输入的用户名 var username = usernameInput.value.trim(); //1.4 判断用户名是否符合规则:长度 6~12 if (username.length >= 6 && username.length <= 12) { //符合规则 document.getElementById("username_err").style.display = 'none'; } else { //不合符规则 document.getElementById("username_err").style.display = ''; } } //1. 验证密码是否符合规则 //1.1 获取密码的输入框 var passwordInput = document.getElementById("password"); //1.2 绑定onblur事件 失去焦点 passwordInput.onblur = function() { //1.3 获取用户输入的密码 var password = passwordInput.value.trim(); //1.4 判断密码是否符合规则:长度 6~12 if (password.length >= 6 && password.length <= 12) { //符合规则 document.getElementById("password_err").style.display = 'none'; } else { //不合符规则 document.getElementById("password_err").style.display = ''; } } //1. 验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件 失去焦点 telInput.onblur = function() { //1.3 获取用户输入的手机号 var tel = telInput.value.trim(); //1.4 判断手机号是否符合规则:长度 11 if (tel.length == 11) { //符合规则 document.getElementById("tel_err").style.display = 'none'; } else { //不合符规则 document.getElementById("tel_err").style.display = ''; } }
验证表单
当用户点击 注册
按钮时,需要同时对输入的 用户名
、密码
、手机号
,如果都符合规则,则提交表单;如果有一个不符合规则,则不允许提交表单。实现该功能需要获取表单元素对象,并绑定 onsubmit
事件
//1. 获取表单对象 var regForm = document.getElementById("reg-form"); //2. 绑定onsubmit 事件 regForm.onsubmit = function () { }
onsubmit
事件绑定的函数需要对输入的 用户名
、密码
、手机号
进行校验,这些校验我们之前都已经实现过了,这里我们还需要再校验一次吗?不需要,只需要对之前校验的代码进行改造,把每个校验的代码专门抽象到有名字的函数中,方便调用;并且每个函数都要返回结果来去决定是提交表单还是阻止表单提交,代码如下:
//1. 验证用户名是否符合规则 //1.1 获取用户名的输入框 var usernameInput = document.getElementById("username"); //1.2 绑定onblur事件 失去焦点 usernameInput.onblur = checkUsername; function checkUsername() { //1.3 获取用户输入的用户名 var username = usernameInput.value.trim(); //1.4 判断用户名是否符合规则:长度 6~12 var flag = username.length >= 6 && username.length <= 12; if (flag) { //符合规则 document.getElementById("username_err").style.display = 'none'; } else { //不合符规则 document.getElementById("username_err").style.display = ''; } return flag; } //1. 验证密码是否符合规则 //1.1 获取密码的输入框 var passwordInput = document.getElementById("password"); //1.2 绑定onblur事件 失去焦点 passwordInput.onblur = checkPassword; function checkPassword() { //1.3 获取用户输入的密码 var password = passwordInput.value.trim(); //1.4 判断密码是否符合规则:长度 6~12 var flag = password.length >= 6 && password.length <= 12; if (flag) { //符合规则 document.getElementById("password_err").style.display = 'none'; } else { //不合符规则 document.getElementById("password_err").style.display = ''; } return flag; } //1. 验证手机号是否符合规则 //1.1 获取手机号的输入框 var telInput = document.getElementById("tel"); //1.2 绑定onblur事件 失去焦点 telInput.onblur = checkTel; function checkTel() { //1.3 获取用户输入的手机号 var tel = telInput.value.trim(); //1.4 判断手机号是否符合规则:长度 11 var flag = tel.length == 11; if (flag) { //符合规则 document.getElementById("tel_err").style.display = 'none'; } else { //不合符规则 document.getElementById("tel_err").style.display = ''; } return flag; }
而 onsubmit
绑定的函数需要调用 checkUsername()
函数、checkPassword()
函数、checkTel()
函数。
//1. 获取表单对象 var regForm = document.getElementById("reg-form"); //2. 绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回false var flag = checkUsername() && checkPassword() && checkTel(); return flag; }
加载全部内容