好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

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

表单检测在登录、注册、订单、留言板等重要部件都必不可少。下面小指就根据表单提交前邮箱的检测为例简单解析一下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\.-_\+]+@[\w-]+(\.\w{2,3})+$/,
         inputField.value, helpText,
         "Please enter a valid email address (for example, qingzz@qingzz.cn).");
      }

      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\.-_\+]+@[\w-]+(\.\w{2,3})+$/;

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

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

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

了解了吧!

错误信息的提示

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

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


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

如果觉得文章对你有用,记得点赞哦~

点赞0
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
伸缩缝
 伸缩缝 2017-05-09 20:11回复
#3
不错的文章,内容文从字顺.禁止此消息:nolinkok@163.com
防风抑尘网
 防风抑尘网 2017-05-08 05:54回复
#2
不错的文章,内容出神入化.禁止此消息:nolinkok@163.com
止水带
 止水带 2017-05-05 00:58回复
#1
好文章,内容雷霆万钧.禁止此消息:nolinkok@163.com
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸