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

本文实例为大家分享了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="https://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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • javascript表单验证大全

    被 JavaScript 验证的这些典型的表单数据有以下几种: 1.用户是否已填写表单中的必填项目? 2.用户输入的邮件地址是否合法? 3.用户是否已输入合法的日期? 4.用户是否在数据域 (numeric field) 中输入了文本? 下面是用户名和密码验证代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &

  • JavaScript表单验证完美代码

    用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q

  • JavaScript 基础表单验证示例(纯Js实现)

    验证思路 监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false 实现代码: index.html <!DOCTYPE html> <html> <head> <title></title> <pnk rel="stylesheet" href="css.css" rel="external nofollo

  • 纯JS实现表单验证实例

    表单我实现了,input属性是text(文本框).radio(单选按钮).checkbox(多选按钮)的知识点, fieldset标签(组合表单中的相关元素).select标签(选择列表)和textarea标签(多行文本框). <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return check

  • javascript实现的简单的表单验证

    表单验证几乎是不可缺少的,有的表单验证是在后台完成的,有的则是使用JavaScript在在前端完成基本的验证,这样可以有效的减轻服务器的压力,下面就介绍一下JS实现的最简单的表单验证.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <script type="text/javascript

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

    本文实例为大家分享了js表单验证的实现方法,供大家参考,具体内容如下 第一种:js表单验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册-个人用户</title> <meta http-equiv="pragma" content="no-cache"

  • Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

    AngularJS提供了表单验证,但是验证的过程交互体验很不好,比如重设密码,重复密码的时候一键入就会提示密码不正确,现整理了两种方法,仅供借鉴. 一,点击提交验证 <form action="" class="form-horizontal col-md-9" name="reset_pwd" ng-submit="resetPwd()"> <div class="form-group"

  • php 防止表单重复提交两种实现方法

    php 防止表单重复提交 由于网络原因,经常出来点了提交按钮,网页没有反应,而进行再次点击.这样就导致后台收到两次提交,从而进行两次处理,本文章向大家介绍php 防止表单重复提交的几种方法 1.前端解决 方法一: 可以通过前端来解决.当用户点了提交按钮之后,先使用js进行有效性判断,没问题后,将提交按钮"禁用"掉.然后再提交! 方法二: 使用ajax提交表单.点了提交按钮后,禁用提将按钮,或者设置一个状态值,将其设为1,表示正在提交.再提交时判断如果正在提交,则不作处理.等ajax返回

  • 利用JavaScript阻止表单提交的两种方法

    在JavaScript中,阻止表单默认提交行为的方法有两种,分别是: (1) return false 示例代码 <form name="loginForm" action="login.aspx" method="post"> <button type="submit" value="Submit" id="submit">Submit</button&g

  • JavaScript表单验证开发

    本文实例为大家分享了js表单验证的具体代码,供大家参考,具体内容如下 在线demo:http://www.hui12.com/nbin/csdn/jsInput/demo.html 效果图: /* 验证类型 testName: "验证用户", testPassword: "密码", testPhone: "手机号码", testQQ: "验证QQ", testLength: "验证是否在指定长度内", //

  • ASP动态生成的javascript表单验证代码

    以网上down了一个ASP动态生成Form验证javascript的代码,自己扩容了一下.作者的大名我给忘了,不过我记得清楚,从第一条至第九条的代码都是该作者的原创.至于九至第十五条却是本人自己加的哦.而且由于本人水平有限,从第九条至第十五条不见得会条条生效啊?呵呵,其实把它贴在这里没有什么必要的,因为这点小会伎俩谁都会用的,我把它的作用定位为:开发时找不到该函数时到这里拷贝一下就可以了.呵,因为我即没有刻录机也没有移动硬盘.实在是没有办法把这些代码随身携带,不过还好,在北京到处都可以上网.所以

  • 利用策略模式与装饰模式扩展JavaScript表单验证功能

    简单的表单验证 html结构 <!-- validata.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validata</title> </head> <body> <form id="form"> <labe

  • 详解JavaScript表单验证(E-mail 验证)

    本文为大家分享了JavaScript表单验证,被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目.假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): function validat

随机推荐