以表单提交前邮箱检测为例解析javascript正则表达式检测

原创 彭淇  2017-08-09 07:52:38  阅读 3368 次 评论 11 条

表单检测在登录、注册、订单、留言板等重要部件都必不可少。下面飞翔勿扰就根据表单提交前邮箱的检测为例简单解析一下javascript正则表达式的使用。实例代码非常实用,让诸君先睹为快~

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>reg example</title>
<style>
body {
 font:14px arial;
 text-align:center;
}

div.heading {
 margin-bottom:25px;
}

div.field {
 margin-bottom:5px;
 text-align:left;
}
span.help {
 color:#660000;
 font-style:italic;
}
</style>
<script type="text/javascript">
function validateRegEx(regex, input, helpText, helpMessage) {
       // See if the input data validates OK
       if (!regex.test(input)) {
         // The data is invalid, so set the help message and return false
         if (helpText != null)
           helpText.innerHTML = helpMessage;
         return false;
       }
       else {
         // The data is OK, so clear the help message and return true
         if (helpText != null)
           helpText.innerHTML = "";
         return true;
       }
    }
function validateNonEmpty(inputField, helpText) {
       // See if the input value contains any text
       return validateRegEx(/.+/,
         inputField.value, helpText,
         "Please enter a value.");
       }

function validateEmail(inputField, helpText) {
       // First see if the input value contains data
       if (!validateNonEmpty(inputField, helpText))
         return false;

       // Then see if the input value is an email address
       return validateRegEx(/^[\w\.-_\+][email protected][\w-]+(\.\w{2,3})+$/,
         inputField.value, helpText,
         "Please enter a valid email address (for example, [email protected]).");
      }

      function placeOrder(form) {
        if (validateEmail(form["email"], form["email_help"])) {
          // Submit the order to the server
          form.submit();
        } else {
          alert("I'm sorry but there is something wrong with the form information.");
        }
      }

      window.onload = function() {
       document.getElementById("email").onblur = function() {validateEmail(this, document.getElementById('email_help'));};
       document.getElementById("submit").onclick = function() {placeOrder(this.form);};
      };
</script>
</head>
<body>
<form name="orderform" action="submit.php" method="POST">
<div>
       Enter your email address:
       <input id="email" name="email" type="text" size="32" />
       <span id="email_help"></span>
    </div>
    <div>
     <input id="submit" name="submit" type="button" value="Submit" />
    </div>
   </form>
</body>
</html>


飞翔勿扰解析一下上面代码的重点:

函数字面量的使用


window.onload = function() {
  document.getElementById("email").onblur = function() {validateEmail(this, document.getElementById('email_help'));};
  document.getElementById("submit").onclick = function() {placeOrder(this.form);};
};


大家应该注意到了,实例代码的javascript与html代码完全分开了。函数的调用放在了window.onload事件里面,而且采用了没有名称的函数即函数字面量。注意如果需要在某个事件调用有参数的函数只能用函数字面量,如果调用没有参数的函数只需要函数名即可,不需要后面的括号。例如如果有一个初始化函数init()需要在onload调用,可以这么做:


<script>window.onload=init;</script>


this和this.form

在表单域,this指的是输入的部件本身,如<input>部件调用this仅仅指的是这个input部件。

但是this包含一个元素是form对象,this.form指的是<input>部件所在的整个form。

因此我们发现this.form["email"],this.form["email_help"]可以直接调用form的某个部件。

正则表达式的使用


function validateRegEx(regex, input, helpText, helpMessage) {
       // See if the input data validates OK
       if (!regex.test(input)) {
         // The data is invalid, so set the help message and return false
         if (helpText != null)
           helpText.innerHTML = helpMessage;
         return false;
       }
       else {
         // The data is OK, so clear the help message and return true
         if (helpText != null)
           helpText.innerHTML = "";
         return true;
       }
}


这个函数是检测正则表达式的,其实正则表达式的使用非常简单:

首先定义正则表达式的变量:


var regVar = /^[\w\.-_\+][email protected][\w-]+(\.\w{2,3})+$/;


注意这个变量不是字符串,其实是一个对象。

然后利用正则表达式对象的test方法检测内容是否符合模式:


// 检测输入的邮箱格式不对
if (!regVar.test(document.getElementById("email").value)


了解了吧!

错误信息的提示

实例里面我们还使用了错误信息的提示,在onblur事件即表单获取焦点又失去焦点的时候检测是否是合适的邮箱格式,如果不对则在后面输出提示信息,如果正确则将提示信息删除。这是一种友好的提示信息格式。

但是在整个表单提交的时候,我们还会再检测一次,这是防止用户没有输入而直接提交表单,而且我们这次采取的是alert警告信息的形式,可以保证得到用户的反应。


正则表达式的基础知识我就不说了,每个语言都要学,大家应该都清楚了,如果有需要我再后面添加一个教程吧。

如果觉得文章对你有用,记得分享和打赏哦~

本文地址:https://www.pengqi.club/blog/5.html
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. Sedyicocouddy
    Sedyicocouddy 【农民】  @回复

    http://bingomatic24.ru

  2. neamctham
    neamctham 【农民】  @回复

    usa payday loans payday loans near me <a href="http://paydayloans2017.com"> what is a payday loan</a> [url=http://paydayloans2017.com]payday loans with no bank account[/url] payday loans online no credit check instant approval

  3. yhuiktxahk
    yhuiktxahk 【农民】  @回复

    O2RVqf lwdlffqswfzx, [url=http://mdqswkocizmp.com/]mdqswkocizmp[/url], [link=http://zeewqbrjaioc.com/]zeewqbrjaioc[/link], http://tkmwlgkhnoth.com/

  4. nsoziwham
    nsoziwham 【农民】  @回复

    payday loans online direct lenders only online payday loans <a href="http://cashadvances2017.com"> payday loan online</a> payday loans direct lender payday loans las vegas

  5. 南通锻造
    南通锻造 【队长】  @回复

    原来是这样的啊 [F13]

  6. 彭淇
    彭淇 【站务管理】  @回复

    [blockquote]签到成功!签到时间:下午2:55:44,每日打卡,生活更精彩哦~[/blockquote]