JS实现表单验证案例

本文实例为大家分享了JS实现表单验证案例的具体代码,供大家参考,具体内容如下

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

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

推荐阅读

    js设置div的边框|怎样给div设置边框

    js设置div的边框|怎样给div设置边框,,1. 怎样给div设置边框1、首先新建一个html文件,输入基本的内容,这里设置一个div,并把它的class设置为de

    js设置样式|js设置样式类

    js设置样式|js设置样式类,,js设置样式    javascript改变CSS样式分为局部和全局,分别如下:  一、局部改变样式    有三种方法:直接

    js用代码实现简单购物车

    js用代码实现简单购物车,,图: 选择所有按钮: 复制代码代码如下所示: 选择 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3

    js设置背景色|js设置颜色

    js设置背景色|js设置颜色,,js设置背景色首先通过js定位到div的子元素,再通过setatteibute方法给属性添加背景色。js设置颜色js改变字体的颜

    为什么WPS表单总是不打开

    为什么WPS表单总是不打开,,为什么WPS表格总是打不开??百度知道为您找到了6条优质回答span>a,type:cluster">很有可能文件已经损坏。恢复

    Safari调试iOS中的js

    Safari调试iOS中的js,页面,设备,概述对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试Jav

    laravel-admin|自定义表单与验证

    laravel-admin|自定义表单与验证,表单,场景,场景:很多时候,由于我们业务场景比较特殊,需要自定义表单,然后框架给我提供了对应表单组建!案列:以

    Bootstrap的js插件之模态框|modal

    Bootstrap的js插件之模态框|modal,模态,饭盒,.modal——指明div元素包裹模态框;.fade——给模态框添加淡入淡出效果;.modal-dialog——包裹

    js默认事件汇总

    js默认事件汇总,事件,表单,默认事件   就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转,右键

    js获取元素宽度

    js获取元素宽度,内联,样式,js获取元素宽度1、使用内联样式,即直接把CSS写在HTML元素的style属性中<div > </div>复制代码通过以下js代码