表单检测在登录、注册、订单、留言板等重要部件都必不可少。下面飞翔勿扰就根据表单提交前邮箱的检测为例简单解析一下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警告信息的形式，可以保证得到用户的反应。
正则表达式的基础知识我就不说了，每个语言都要学，大家应该都清楚了，如果有需要我再后面添加一个教程吧。
如果觉得文章对你有用，记得分享和打赏哦～
发表评论