JS表单验证案例
农夫与茶 人气:01.当输入框失去焦点时,验证输入内容是否符合要求
(1)获取表单输入框
(2)绑定 onblur 事件
(3)获取输入内容
(4)判断是否符合规则
(5)如果不符合规则,则显示错误提示信息
2.当点击注册按钮是,判断所有输入框的内容是否符合要求,如果不符合则阻止表单提交
(1)获取表单对象
(2)微表单对象绑定 onsubmit
(3)判断所有输入框是否都符合要求,如果符合,则返回true,如果有一项不符合,则返回false
<body> <div class="form-div"> <div class="reg-content"> <h1>欢迎注册</h1> <span>已有帐号?</span> <a href="#" rel="external nofollow" >登录</a> </div> <form id="reg-form" action="#" method="get"> <table> <tr> <td>用户名</td> <td class="inputs"> <input name="username" type="text" id="username"> <br> <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"> <br> <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"> <br> <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> //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 reg = /^\w{6,12}$/; var flag = reg.test(username); //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 reg = /^\w{6,12}$/; var flag = reg.test(password); //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,数字组成,第一位是1 //var flag = tel.length == 11; var reg = /^[1]\d{10}$/; var flag = reg.test(tel); if (flag) { //符合规则 document.getElementById("tel_err").style.display = 'none'; } else { //不合符规则 document.getElementById("tel_err").style.display = ''; } return flag; } //1. 获取表单对象 var regForm = document.getElementById("reg-form"); //2. 绑定onsubmit 事件 regForm.onsubmit = function () { //挨个判断每一个表单项是否都符合要求,如果有一个不合符,则返回false var flag = checkUsername() && checkPassword() && checkTel(); return flag; } </script> </body>
加载全部内容