add Form validation & graphics
parent
d474603508
commit
40bed56cbc
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>My Sample Password Validation</title>
|
||||||
|
<script src="validate.js"></script>
|
||||||
|
<!-- My sample pages -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<form method="POST" action="..." onsubmit="return checkForm(this);">
|
||||||
|
<p>Username: <input type="text" name="username"></p>
|
||||||
|
<p>Password: <input type="password" name="pwd1"></p>
|
||||||
|
<p>Confirm Password: <input type="password" name="pwd2"></p>
|
||||||
|
<p><input type="submit"></p>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
function checkPassword(str)
|
||||||
|
{
|
||||||
|
var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$/;
|
||||||
|
return re.test(str);
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
matches a string of six or more characters;
|
||||||
|
that contains at least one digit (\d is shorthand for [0-9]);
|
||||||
|
at least one lowercase character; and
|
||||||
|
at least one uppercase character:
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
function checkForm(form)
|
||||||
|
{
|
||||||
|
if(form.username.value == "") {
|
||||||
|
alert("Error: Username cannot be blank!");
|
||||||
|
form.username.focus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
re = /^\w+$/; //\w is shorthand for 'any letter, number or the underscore character'.
|
||||||
|
if(!re.test(form.username.value)) {
|
||||||
|
alert("Error: Username must contain only letters, numbers and underscores!");
|
||||||
|
form.username.focus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
|
||||||
|
if(!checkPassword(form.pwd1.value)) {
|
||||||
|
alert("The password you have entered is not valid!");
|
||||||
|
form.pwd1.focus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert("Error: Please check that you've entered and confirmed your password!");
|
||||||
|
form.pwd1.focus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
circle {
|
||||||
|
fill: blue;
|
||||||
|
stroke: red;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
line { stroke: red;}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="imgstyle.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<svg width=300 height=300>
|
||||||
|
<circle cx="50" cy="50" r="10" />
|
||||||
|
<line x1="80" y1="20" x2="80" y2="130"></line>
|
||||||
|
<rect x="100" y="80" width="55" height="30"></rect>
|
||||||
|
<polygon points="210,100, 230,100, 220,80"></polygon>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<!-- uniform scale -->
|
||||||
|
<circle cx="0" cy="0" r="10" fill="blue"
|
||||||
|
transform="scale(4)" />
|
||||||
|
|
||||||
|
<!-- vertical scale -->
|
||||||
|
<circle cx="0" cy="0" r="10" fill="green"
|
||||||
|
transform="scale(1,4)" />
|
||||||
|
|
||||||
|
<!-- horizontal scale -->
|
||||||
|
<circle cx="0" cy="0" r="10" fill="yellow"
|
||||||
|
transform="scale(4,1)" />
|
||||||
|
|
||||||
|
<!-- No scale -->
|
||||||
|
<circle cx="0" cy="0" r="10" fill="black" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<svg width=300 height=300>">
|
||||||
|
<!-- Demo for text and defalut values for x,y -->
|
||||||
|
<text x="50" y="20">Translate Demo</text>
|
||||||
|
<rect width="40" height="40" fill="pink" />
|
||||||
|
|
||||||
|
<!-- No translation -->
|
||||||
|
<rect x="50" y="50" width="40" height="40" fill="green" />
|
||||||
|
|
||||||
|
<!-- Horizontal translation -->
|
||||||
|
<rect x="50" y="50" width="40" height="40" fill="blue"
|
||||||
|
transform="translate(50)" />
|
||||||
|
|
||||||
|
<!-- Vertical translation -->
|
||||||
|
<rect x="50" y="50" width="40" height="40" fill="red"
|
||||||
|
transform="translate(0 50)" />
|
||||||
|
|
||||||
|
<!-- Both horizontal and vertical translation -->
|
||||||
|
<rect x="50" y="50" width="40" height="40" fill="yellow"
|
||||||
|
transform="translate(50,50)" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>My Sample Pages</title>
|
||||||
|
<link rel="stylesheet" href="mystyle2.css">
|
||||||
|
<script src="myscripts2.js"></script>
|
||||||
|
<!-- My sample pages -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1 id="largeGreen"> MY COMPANY </h1>
|
||||||
|
<h2 id="h1ref"> Welcome to DevToolKit 1 course </h2>
|
||||||
|
<p> This is our first class! </p>
|
||||||
|
<p class = "info"> Follow my code!</p>
|
||||||
|
<a id="myLink" href="http://www.anuflora.com">Game Analytics</a>
|
||||||
|
<p class = "info button"> My Bank Pte Ltd </p>
|
||||||
|
<!--
|
||||||
|
<button class = "button" onclick="myFunction()">click me1</button>
|
||||||
|
<button class = "button" onclick="changeContent()">click me2</button>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!--fancy buttons -->
|
||||||
|
|
||||||
|
<button class = "button button1" onclick="myFunction()">click me</button>
|
||||||
|
<button class = "button button2" onclick="changeContent()">click me</button>
|
||||||
|
|
||||||
|
<svg width="200" height="200">
|
||||||
|
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
|
||||||
|
<circle cx="150" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
|
||||||
|
</svg>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
chart = {
|
||||||
|
replay;
|
||||||
|
|
||||||
|
const svg = d3.create("svg")
|
||||||
|
.attr("viewBox", [0, 0, width, height]);
|
||||||
|
|
||||||
|
const l = length(line(data));
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.call(xAxis);
|
||||||
|
|
||||||
|
svg.append("g")
|
||||||
|
.call(yAxis);
|
||||||
|
|
||||||
|
svg.append("path")
|
||||||
|
.datum(data)
|
||||||
|
.attr("fill", "none")
|
||||||
|
.attr("stroke", "black")
|
||||||
|
.attr("stroke-width", 2.5)
|
||||||
|
.attr("stroke-linejoin", "round")
|
||||||
|
.attr("stroke-linecap", "round")
|
||||||
|
.attr("stroke-dasharray", `0,${l}`)
|
||||||
|
.attr("d", line)
|
||||||
|
.transition()
|
||||||
|
.duration(5000)
|
||||||
|
.ease(d3.easeLinear)
|
||||||
|
.attr("stroke-dasharray", `${l},${l}`);
|
||||||
|
|
||||||
|
// draw dots?
|
||||||
|
svg.append("g")
|
||||||
|
.attr("fill", "white")
|
||||||
|
.attr("stroke", "black")
|
||||||
|
.attr("stroke-width", 2)
|
||||||
|
.selectAll("circle")
|
||||||
|
.data(data)
|
||||||
|
.join("circle")
|
||||||
|
.attr("cx", d => x(d.x))
|
||||||
|
.attr("cy", d => y(d.y))
|
||||||
|
.attr("r", 3);
|
||||||
|
//
|
||||||
|
const label = svg.append("g")
|
||||||
|
.attr("font-family", "sans-serif")
|
||||||
|
.attr("font-size", 10)
|
||||||
|
.selectAll("g")
|
||||||
|
.data(data)
|
||||||
|
.join("g")
|
||||||
|
.attr("transform", d => `translate(${x(d.x)},${y(d.y)})`)
|
||||||
|
.attr("opacity", 0);
|
||||||
|
|
||||||
|
label.append("text")
|
||||||
|
.text(d => d.name)
|
||||||
|
.each(function(d) {
|
||||||
|
const t = d3.select(this);
|
||||||
|
switch (d.orient) {
|
||||||
|
case "top": t.attr("text-anchor", "middle").attr("dy", "-0.7em"); break;
|
||||||
|
case "right": t.attr("dx", "0.5em").attr("dy", "0.32em").attr("text-anchor", "start"); break;
|
||||||
|
case "bottom": t.attr("text-anchor", "middle").attr("dy", "1.4em"); break;
|
||||||
|
case "left": t.attr("dx", "-0.5em").attr("dy", "0.32em").attr("text-anchor", "end"); break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.call(halo);
|
||||||
|
|
||||||
|
label.transition()
|
||||||
|
.delay((d, i) => length(line(data.slice(0, i + 1))) / l * (5000 - 125))
|
||||||
|
.attr("opacity", 1);
|
||||||
|
|
||||||
|
return svg.node();
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<title>My Sample Password Validation</title>
|
||||||
|
<!-- link rel="stylesheet" href="mystyle.css" -->
|
||||||
|
<script src="validate.js"></script>
|
||||||
|
<!-- My sample pages -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<form method="POST" action="..." onsubmit="return checkForm(this);">
|
||||||
|
<p>Username: <input type="text" name="username"></p>
|
||||||
|
<p>Password: <input type="password" name="pwd1"></p>
|
||||||
|
<p>Confirm Password: <input type="password" name="pwd12"></p>
|
||||||
|
<p><input type="submit"></p>
|
||||||
|
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
function checkForm(form){
|
||||||
|
console.log("checkForm");
|
||||||
|
alert("chckForm");
|
||||||
|
// check non-empty
|
||||||
|
if (form.username.value == ""){
|
||||||
|
form.username.focus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
re=/^\w+$/; // \w is shorthand for any letter, number or the underscore character
|
||||||
|
if (!re.test(form.username.value)){
|
||||||
|
alert("Error: Username must contain only letters, numbers and underscare!");
|
||||||
|
form.username.focus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
alert("confirm");
|
||||||
|
// confirm password
|
||||||
|
if (form.pwd1.value != "" && form.pwd1.value == form.pwd2.value){
|
||||||
|
if (!checkPassword(form.pwd1.value)){
|
||||||
|
alert("Invalid Password");
|
||||||
|
form.pwd1.focus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// pass
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
alert("Error: Password mismatch");
|
||||||
|
form.pwd1.focus();
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
//pass
|
||||||
|
alert("pass");
|
||||||
|
return true;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkPassword(value)
|
||||||
|
{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue