HTML5 form verification brings convenience to front-end personnel, but there are some flaws in user experience. The default prompt is not friendly to users and cannot accurately obtain the desired information. Fortunately, when designing the interface, the big guys provide the setCustomValidilty method to customize the prompt information. This is good news, but there are also some disadvantages. It is necessary to let the staff do some extra processing to achieve the real purpose.
Example 1:
<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
<title>Html5Page usagejavascriptVerify form judgment input</title>
<script language="javascript">
function check(){
var pass1=("pass1");
var pass2=("pass2");
if (!=){
("Password inconsistent");
else
("");
}
var email=("email");
if (!())
("Please enter the correct email address");
}
</script>
</head>
<form onsubmit="return check()">
password:<input type="password" name="pass1" /><br/>
确认password:<input type="password" name="pass2" /><br/>
Email:<input type="email" name="email" /><br/>
<input type="submit" />
</form>
Example 2:
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8">
<title>form test</title>
</head>
<body>
<form name="test" action="." method="post">
<input type="text" required pattern="^\d{4}$" oninput="out(this)" placeholder="Please enter the code" >
<button type="submit">Check</button>
</form>
<script type="text/javascript">
function out(i){
var v = ;
if(true === ){
("Please fill in some fields");
}else{
if(true === ){
("Please enter a 4-digit code");
}else{
("");
}
}
}
</script>
</body>
</html>
The above is the entire content of this article, I hope you like it.