markdown HTML.CSS.JS.FetchingDataServerside.Password validation.v1
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了markdown HTML.CSS.JS.FetchingDataServerside.Password validation.v1相关的知识，希望对你有一定的参考价值。
input:invalid:required,
input:invalid {
background-color: #FFB6C1;
border: 2px solid #FF0000;
}
form {
margin: 20px;
}
fieldset {
border: none;
}
legend {
border-bottom: 2px solid #00008B;
color: #00008B;
font-family: Verdana;
font-size:14px;
width: 400px;
}
label {
display: inline-block;
padding: 4px;
text-align: right;
width: 400px;
}
input[type=text],
input[type=password],
input[type=date],
input[type=email],
input[type=search],
input[list],
input[type=color],
input[type=number],
input[type=submit],
input[type=button],
textarea {
border: 2px solid #00008B;
border-radius: 5px;
padding: 7px;
width: 300px;
}
textarea {
height: 100px;
vertical-align: top;
}
input[type=search] {
width: 320px;
}
input[type=color] {
cursor: pointer;
width: 150px;
}
input[type=number] {
width: 150px;
}
input[type=range] {
width: 300px;
}
meter {
height: 20px;
width: 100px;
}
input[type=submit] {
background-color: #BEBEF7;
color: #00008B;
cursor:pointer;
font-weight: bold;
margin-left: 420px;
width: 320px;
}
input[type=button] {
background-color: #EFBDB8;
border-color: #8B0000;
color: #8b0000;
cursor:pointer;
font-weight: bold;
margin-left: 420px;
width: 320px;
}function checkpasswords() {
var p1 = document.getElementById("passwordA");
var p2 = document.getElementById("passwordB");
if (p1.value !== p2.value) {
p2.setCustomValidity("Passwords do not match");
} else {
p2.setCustomValidity("");
}
var strength = document.getElementById("passwordStrength");
var multiplier = 0;
if ( /[a-z]/.test(p1.value) ) { multiplier++; }
if ( /[A-Z]/.test(p1.value) ) { multiplier++; }
if ( /[0-9]/.test(p1.value) ) { multiplier++; }
strength.value = p1.value.length * multiplier;
}
function validateCallingOptions() {
var input = document.getElementById("call");
var validity = input.validity;
if (validity.patternMismatch) {
input.setCustomValidity("Not a phone number");
} else {
input.setCustomValidity("");
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML5 form</title>
<meta charset="utf-8">
</head>
<body>
<form action="forum.cfm" method="post">
<fieldset>
<legend>The bits I need to make you join my forum</legend>
<label for="givenName">Given name</label>
<input required type="text" name="givenName" id="givenName" autocomplete="off" autofocus />
<br/>
<label for="familyName">family name</label>
<input required type="text" name="familyName" id="familyName" autocomplete="off" />
<br/>
<label for="passwordA">Password</label>
<input required type="password" name="passwordA" id="passwordA" oninput="checkpasswords()" />
<meter id="passwordStrength" min="0" max="10" value="0" low="5"></meter>
<br/>
<label for="passwordB">Make sure it's right</label>
<input required type="password" name="passwordB" id="passwordB" oninput="checkpasswords()" />
<br/>
</fieldset>
<fieldset>
<legend>Random bits I don't need, I'm just curious</legend>
<label for="dob">Birthday</label>
<input type="date" name="dob" id="dob">
<br/>
<label for="email">E-mail</label>
<input type="email" name="email" id="email" autocomplete="off"/>
<br/>
<label for="whereami">Hide and seek location</label>
<textarea name="whereami" id="whereami"></textarea>
<button id="findme" type="button">Locate me</button>
<br/>
</fieldset>
<fieldset>
<legend>Answer me these questions three</legend>
<label for="quest">What is your quest?</label>
<input name="quest" id="quest" type="search" placeholder="I seek..." autocomplete="off" />
<br/>
<label for="colour">What is you favourite colour?</label>
<input type="color" id="colour" name="colour" oninput="this.style.backgroundColor = this.value);" />
<br/>
<label for="swallow">What is the wind speed velocity of an unladen swallow?</label>
<input list="swallows" id="swallow" name="swallow" />
<datalist id="swallows">
<option value="African or European?"></option>
</datalist>
<br />
</fieldset>
<fieldset>
<legend>Sanity checks</legend>
<label for="chuck">How much wood would a woodchuck chuck if a woodchuck could chuck wood?</label>
<input type="number" name="chuck" id="chuck" min="1" max="15" step="1" value="1" />
<br/>
<label for="santa">How possessed by Santa are you right now?</label>
<input name="santa" id="santa" type="range" min="1" max="12" step="1" value="1" />
<output name="so" id="santaoutput">1</output>
<br/>
<label for="call">Who you gonna call?</label>
<input list="callingoptions" id="call" name="call" pattern="Ghostbusters|[0-9]*" oninput="validateCallingOptions();" />
<datalist id="callingoptions">
<option value="Ghostbusters"></option>
</datalist>
</fieldset>
<input type="submit" value="Register!" />
</form>
</body>
</html>HTML.CSS.JS.FetchingDataServerside.Password validation.v1
---------------------------------------------------------
A [Pen](https://codepen.io/Onlyforbopi/pen/XPvoEQ) by [Pan Doul](https://codepen.io/Onlyforbopi) on [CodePen](https://codepen.io).
[License](https://codepen.io/Onlyforbopi/pen/XPvoEQ/license).以上是关于markdown HTML.CSS.JS.FetchingDataServerside.Password validation.v1的主要内容，如果未能解决你的问题，请参考以下文章