首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript表单验证的两种实现方法

Posted in Javascript onFebruary 11, 2017

本文实例为大家分享了js表单验证的实现方法，供大家参考，具体内容如下

第一种：js表单验证

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>注册-个人用户</title>
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <script src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script>
  <style>
    body {
      font-family: Arial, "宋体", Lucida, Verdana, Helvetica, sans-serif;
      font-size: 12px;
      color: #333;
      line-height: 150%;
      background: #f2f2f2;
    }

    .hide{display:none;}

    .focus,.error {
      color: #e4393c;
      line-height: 36px;
      height: 36px;
      position: absolute;
      top: 0px;

      width: 260px;
      padding: 0 5px;
      background: #FFEBEB;
      border: 1px solid #ffbdbe;
    }

    .error span,.focus span {
      padding: 5px 0;
      line-height: 13px;
      display: block;
    }

    .focus {
      color: #666;
      width: 260px;;
      line-height: 36px;
      background: #f7f7f7;
      border: 1px solid #dddddd;
    }

    .regist {
      width: 990px;
      padding: 0;
      margin: 0 auto;
      zoom: 1;
    }


    .mc {
      padding: 30px 0 20px;
      border: solid #dddddd; border-width : 0px 1px 1px;
      background: #FFF;
      overflow: hidden;
      zoom: 1;
      border-width: 0px 1px 1px;
    }

    .form {
      float: left;
      width: 750px;
      font-size: 12px;
    }

    .form label,.form input,.form select,.form textarea,.form button,.form .label {
      float: left;
      font-size: 12px;
    }

    .item {
      padding-top: 9px;
      height: 60px;
      line-height: 34px;
      position: relative;
      z-index: 1;
    }

    .label {
      float: left;
      width: 190px;
      text-align: right;
      font-size: 14px;
      color: #999;
      padding-right: 10px;
    }

    .input {
      float: left;
      position: relative;
      width: 270px;
      overflow: visible;
    }

    .text {
      float: none;
      width: 275px;
      height: 37px;
      line-height: 32px;
      border: 1px solid #cccccc;
      font-size: 14px;
      font-family: arial, "宋体";
      overflow: hidden;
    }

  </style>
</head>
<body>
  <div class="regist"> 
    <div class="mc">
      <form id="personRegForm" class="form" action="login.html" method="POST" onsubmit="return validateForm();">
        <div class="item">
          <span class="label">用户名：</span>
          <div class="input">
            <input type="text" id="username" name="username" class="text">

            <label id="username_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label">请设置密码：</span>
          <div class="input">
            <input type="password" id="password" name="password" class="text">

            <label id="pwd_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label">请确认密码：</span>
          <div class="input">
            <input type="password" id="pwdRepeat" name="pwdRepeat" class="text">

            <label id="pwdRepeat_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label">验证邮箱：</span>
          <div class="input">
            <input type="text" id="mail" name="mail" class="text">

            <label id="mail_msg" class="hide"></label>
          </div>
        </div>
        <div class="item">
          <span class="label"> </span>
          <input type="submit" class="btn-img" id="registsubmit" value="立即注册" />
        </div>
      </form>
    </div>  
  </div>


   <script>
    window.onload = function(){
      // 1. 用户名
      $("#username").focus(function(){
        /* 获取焦点
        var username_msg = $("#username_msg");
        username_msg.text("4-20位字符，支持英文、数字及'-'、'_'组合");
        username_msg.attr("class","focus");
        */
        elemFocus("username_msg","4-20位字符，支持英文、数字及'-'、'_'组合");

      }).blur(userValidator);
      // 2. 密码
      $("#password").focus(function(){
        elemFocus("pwd_msg","6-20位字符，可使用字母、数字的组合");
      }).blur(pwdValidator);
      // 3. 确认密码
      $("#pwdRepeat").focus(function(){
        elemFocus("pwdRepeat_msg","6-20位字符，可使用字母、数字的组合");
      }).blur(pwdRepeatValidator);
      // 4. Email
      $("#mail").focus(function(){
        elemFocus("mail_msg","完成验证后，可以使用该邮箱登录和找回密码");
      }).blur(emailValidator);
    }

    // 定义函数 - 通用的信息提示
    function elemFocus(eleId,text){
      var ele_msg = $("#"+eleId);
      ele_msg.text(text);
      ele_msg.attr("class","focus");
    }

    // 定义验证用户名的函数
    function userValidator(){
      // 获取用户名输入的值
      var value = $("#username").val();
      // 获取用于显示提示信息的元素
      var username_msg = $("#username_msg");
      // 验证逻辑
      if(value==""||value==null){
        username_msg.text("用户名不能为空");
        username_msg.attr("class","error");
        return false;
      }else if(value.length<4||value.length>20){
        username_msg.text("用户名的长度不正确");
        username_msg.attr("class","error");
        return false;
      }else if(!/^[a-zA-Z0-9-_]{4,20}$/.test(value)){
        username_msg.text("用户名输入不正确");
        username_msg.attr("class","error");
        return false;
      }
      // 验证通过修改正确样式
      if(!username_msg.hasClass("hide")){
        username_msg.text("");
        username_msg.attr("class","hide");
      }
      return true;
    }
    // 定义验证密码的函数
    function pwdValidator(){
      var value = $("#password").val();
      var pwd_msg = $("#pwd_msg");
      if(value==""||value==null){
        pwd_msg.text("密码不能为空");
        pwd_msg.attr("class","error");
        return false;
      }else if(value.length<6||value.length>20){
        pwd_msg.text("密码的长度不正确");
        pwd_msg.attr("class","error");
        return false;
      }else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
        pwd_msg.text("密码输入不正确");
        pwd_msg.attr("class","error");
        return false;
      }
      if(!pwd_msg.hasClass("hide")){
        pwd_msg.text("");
        pwd_msg.attr("class","hide");
      }
      return true;
    }
    // 定义确认密码验证的函数
    function pwdRepeatValidator(){
      var value = $("#pwdRepeat").val();
      var pwdRepeat_msg = $("#pwdRepeat_msg");
      var pwd = $("#password").val();
      if(value==""||value==null){
        pwdRepeat_msg.text("密码不能为空");
        pwdRepeat_msg.attr("class","error");
        return false;
      }else if(value.length<6||value.length>20){
        pwdRepeat_msg.text("密码的长度不正确");
        pwdRepeat_msg.attr("class","error");
        return false;
      }else if(!/^[a-zA-Z0-9]{6,20}$/.test(value)){
        pwdRepeat_msg.text("密码输入不正确");
        pwdRepeat_msg.attr("class","error");
        return false;
      }else if(value != pwd){
        pwdRepeat_msg.text("两次密码输入不一致");
        pwdRepeat_msg.attr("class","error");
        return false;
      }
      if(!pwdRepeat_msg.hasClass("hide")){
        pwdRepeat_msg.text("");
        pwdRepeat_msg.attr("class","hide");
      }
      return true;
    }
    // 定义Email验证的函数
    function emailValidator(){
      var value = $("#mail").val();
      var email_msg = $("#mail_msg");
      if(value==""||value==null){
        email_msg.text("Email不能为空");
        email_msg.attr("class","error");
        return false;
      }else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)){
        email_msg.text("Email格式不正确");
        email_msg.attr("class","error");
        return false;
      }
      if(!email_msg.hasClass("hide")){
        email_msg.text("");
        email_msg.attr("class","hide");
      }
      return true;
    }
    function validateForm(){
      if(!userValidator()||!pwdValidator()||!pwdRepeatValidator()||!emailValidator()){
        return false;
      }
      return true;
    }
  </script>
</body>
</html>

第二种：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      form {
        width: 570px;
        height: 300px;
        margin: 100px auto;
      }

      label {
        width: 64px;
        float: left;
        clear: left;
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
      }

      input {
        width: 300px;
        height: 36px;
        line-height: 36px;
        margin-top: 10px;
        text-indent: 8px;
        font-size: 16px;
        font-family: "微软雅黑";
        border: 1px solid #ccc;
        float: left;
      }

      #sub {
        width: 302px;
        height: 40px;
        border: 1px solid #ccc;
        background: #888;
        color: #fff;
        font-size: 18px;
        text-indent: 0;
      }

      .spa {
        height: 36px;
        line-height: 36px;
        width: 204px;
        display: inline-block;
        float: left;
        font-size: 12px;
        color: #BD362F;
        text-indent: 10px;
        margin-top: 10px;
      }
    </style>
  </head>

  <body>
    <form action="" method="post">
      <label id="name">姓 名：</label><input type="text" name="username" id="username" value="" placeholder="请输入姓名" /><span class="spa spa1"></span><br />
      <label id="phone">手机号：</label><input type="text" name="userphone" id="userphone" value="" placeholder="请输入手机号" /><span class="spa spa2"></span><br />
      <label id="address">地 址：</label><input type="text" name="useraddress" id="useraddress" value="" placeholder="请输入地址" /><span class="spa spa3"></span><br />
      <label>    </label><input type="submit" value="注册" id="sub" />
    </form>
    <script src="http://code.jquery.com/jquery-1.4.1.js"></script>
    <script type="text/javascript">
      window.onload = function() {
          $("#username").focus()
        }
        /************************ 失焦判断 **********************************/
      $("input").blur(function() {
          $(".spa").css("color", "#BD362F")
          if($(this).is("#username")) { //姓名判断
            var na = /^[\u4E00-\u9FA5]{2,4}$/
            if($("#username").val() != "") {
              if(!(na.test($("#username").val()))) {
                $(".spa1").text("请输入2-4个汉字");
                $(this).css("border", "1px solid #BD362F")
                return false;
              } else if(na) {
                $(".spa1").text("");
                return true;
              }
            } else {
              $(".spa1").text("");
            }
          }
          if($(this).is("#userphone")) { //手机号判断
            var ph = /^1[3|5|7|8|][0-9]{9}$/
            if($("#userphone").val() != "") {
              if(!(ph.test($("#userphone").val()))) {
                $(".spa2").text("请输入正确手机号");
                $(this).css("border", "1px solid #BD362F")
                return false;
              } else if(ph) {
                $(".spa2").text("");
                return true;
              }
            } else {
              $(".spa2").text("");
            }
          }

          if($(this).is("#useraddress")) { //地址判断
            var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/;
            if($("#useraddress").val() != "") {
              if(!(ad.test($("#useraddress").val()))) {
                $(".spa3").text("请输入正确地址");
                $(this).css("border", "1px solid #BD362F")
                return false;
              } else if(ad) {
                $(".spa3").text("");
                return true;
              }
            } else {
              $(".spa3").text("");
            }
          }
        })
        /********************** 聚焦提示 ************************/
      $("input").focus(function() {
          if($(this).is("#username")) {
            $(".spa1").text("四个汉字").css("color", "#aaa")
            $(this).css("border", "1px solid #aaa")
          }
          if($(this).is("#userphone")) {
            $(".spa2").text("11位手机号码").css("color", "#aaa")
            $(this).css("border", "1px solid #aaa")
          }
          if($(this).is("#useraddress")) {
            $(".spa3").text("最少8个字符（汉字、字母和数字）").css("color", "#aaa")
            $(this).css("border", "1px solid #aaa")
          }
        })
        /*********************** 提交验证 ***************************/
      $("#sub").click(function() {
        var na = /^[\u4E00-\u9FA5]{2,4}$/; //姓名正则
        var ph = /^1[3|5|7|8|][0-9]{9}$/; //手机号正则
        var ad = /^(?=.*?[\u4E00-\u9FA5])[\dA-Za-z\u4E00-\u9FA5]{8,32}/; //地址正则
        if(na.test($("#username").val()) && ph.test($("#userphone").val()) && ad.test($("#useraddress").val())) {
          return true;
        } else {
          if($("#username").val() == "") {
            $(".spa1").text('请你填写用户名')
          }
          if($("#userphone").val() == "") {
            $(".spa2").text('请你填写手机号')
          }
          if($("#useraddress").val() == "") {
            $(".spa3").text('请你填写地址')
          }
          return false;
        }
      })
    </script>
  </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript表单验证的两种实现方法

- Author -

zuncle

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
仿迅雷焦点广告效果(JQuery版)
Nov 19 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
使用js显示当前时间示例
Mar 02 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
理解jQuery stop()方法
Nov 21 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
jQuery实现复制到粘贴板功能
Feb 11 #Javascript
js实现PC端和移动端刮卡效果
Mar 27 #Javascript
js实现短信发送倒计时功能（正则验证）
Feb 10 #Javascript
BootStrap select2 动态改变值的方法
Feb 10 #Javascript
angularjs实现的前端分页控件示例
Feb 10 #Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 #Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 #Javascript
广播(8) 保养(1) 短波(8) 电台频率(32) Harman Kardon(1) 无线电(12) 收音机(62) 长波(3) KDKA(1) 立体声(1)
You might like
建立文件交换功能的脚本（二）
2006/10/09 PHP
第十二节--类的自动加载
2006/11/16 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP中的替代语法简介
2014/08/22 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
使用js 设置url参数
2013/07/08 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
学习Node.js模块机制
2016/10/17 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦：iG 3：0 OG夺冠
2017/04/05 DOTA
python字符串排序方法
2014/08/29 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
最新创业融资计划书
2014/01/19 职场文书
交通事故私了协议书
2014/04/16 职场文书
学雷锋宣传标语
2014/06/25 职场文书
暑期培训班招生方案
2014/08/26 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
优秀范文：《但愿人长久》教学反思3篇
2019/10/24 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
js中Object.create实例用法详解
2021/10/05 Javascript