1.In the JavaScript file, note that three functions are supplied. The $ function
ID: 3783489 • Letter: 1
Question
1.In the JavaScript file, note that three functions are supplied. The $ function. The validatePhone function that contains the validation code. And an onload event handler that attaches the validatePhone function to the click event of the Validate button.
2. Change the regular expression pattern in the pattern variable so the phone number can contain an optional “1-“ prefix. The best way to do this is to copy the pattern variable to a new line and then comment out the original. This way, you can refer to the original pattern as you adjust it.
3. When the validation in step 4 is working correctly, change the new pattern so that the phone number can also contain either dashes or periods. Again, it’s best to make a copy so you can refer to what came before.
4. When the validation is step 5 is working correctly, change the new pattern so the phone number can have optional parentheses around the area code. To accommodate this change, you’ll want to allow blank spaces instead of dashes or periods after the optional “1” and after the area code.
html part:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Phone Number Validator</title>
<link rel="stylesheet" href="regex.css">
<script src="regex.js"></script>
</head>
<body>
<main>
<h1>Validate phone number</h1>
<label for="phone">Phone Number:</label>
<input type="text" id="phone"><br>
<label> </label>
<input type="button" id="validate" value="Validate"><br>
<label> </label>
<span id="message"> </span>
</main>
</body>
</html>
This is the JS code to work on:
"use strict";
var $ = function(id) { return document.getElementById(id); };
var validatePhone = function() {
var phone = $("phone").value;
var pattern = /^d{3}-d{3}-d{4}$/; // 999-999-9999
var isValid = pattern.test(phone);
$("message").firstChild.nodeValue = (isValid) ? "Valid phone number" : "Invalid phone number";
};
window.onload = function() {
$("validate").onclick = validatePhone;
$("phone").value = "123-456-7890"; // set default phone number
};
Explanation / Answer
1. Regular expression for allowing any occurance to be optional ' ? ' is used , Therefore the regular epression for allowing '1-' as optional is :
var pattern = /^(1-)?d{3}-d{3}-d{4}$/;
2. Check for either or condition is done using, ' | ' . Thus, regular expression for allowing either ' . ' or ' - ' is,
var pattern = /^(1(-|.))?d{3}(-|.)d{3}(-|.)d{4}$/;
3. For allowing optional parentheses around area code ( eg. 1 (999) 999-999 or 1-999-999-999 ) , the pattern should be test for,
To check for paranthese(parantheses being wild cards) : a backward slash ' ' is used, so to check for paranthese its written as ' ( or ) ' .
Also as paranthese are used we need to allow space around area code (whitespace character), so to allow space ' s ' is used.
the above tests only differs with the starting condition , its end is same ends with 4 diguts preceded by ' - or . ' . pattern to test for phone numbers containg parentheses is: (1s)?(d{3})(s)d{3}(-|.)d{4}$/
and pattern for testing without parentheses is: (1(-|.))?d{3}(-|.)d{3}(-|.)d{4}$/
clearly, we can see that diiference is only, in the start of the pattern the ending part is same so combining the above two with ' | ' we have the optimised pattern:
var pattern = /^(((1s)?(d{3})(s)d{3})|((1(-|.))?d{3}(-|.)d{3}))(-|.)d{4}$/;
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.