首页
所有分类
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 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
jQuery滚动条插件nanoscroller使用指南
Apr 21 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
es7学习教程之Decorators（修饰器）详解
Jul 21 Javascript
Three.js如何用轨迹球插件（trackball）增加对模型的交互功能详解
Sep 25 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
浅谈Vue的加载顺序探讨
Oct 25 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
德劲1103(3) PHILIPS(3) 德生9700DX(1) 飞利浦(2) D1835(1) 德生PL330(2) D1875(1) 山进(2) L4X25T(1) SANGEAN(1)
You might like
十天学会php之第九天
2006/10/09 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php实现复制移动文件的方法
2015/07/29 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
PHP的mysqli_stmt_init()函数讲解
2019/01/24 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
img的onload的另类用法
2008/01/10 Javascript
语义化 H1 标签
2008/01/14 Javascript
用js实现下载远程文件并保存在本地的脚本
2008/05/06 Javascript
CSS和Javascript简单复习资料
2010/06/29 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
Javascript技术难点之apply，call与this之间的衔接
2015/12/04 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
js中this对象用法分析
2018/01/05 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python中SQLite如何使用
2020/05/27 Python
python 读取、写入txt文件的示例
2020/09/27 Python
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
毕业生个人求职信范例分享
2013/12/17 职场文书
优秀护士先进事迹
2014/05/08 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
“爱眼护眼，提前预防近视”倡议书3篇
2019/10/30 职场文书
十大最强火系宝可梦，喷火龙上榜，第一名有双火属性
2022/03/18 日漫