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