JavaScript verification requirements:
1. Each item must be filled in or selected, and cannot be empty;
2. User name: it can only contain English letters and underscores, with a length of 6-18 characters;
3. Password: it must contain English letters in upper and lower case and numbers, and the length cannot be less than 6 characters;
4. Confirm password: it must be the same as the password;
5. Contact number: ensure the validity of mobile number;
6. E-mail: to ensure the effectiveness of e-mail;
7. If the user does not input the information according to the above requirements, when the cursor leaves the item, the corresponding prompt information will be given in red font on the right side of the item.
<html>
<head>
<meta charset="UTF-8">
<title>New user registration</title>
</head>
<style>
form{
width: 700px;
margin: 50px auto;
padding: 20px;
border: 1px solid black;
}
div{
padding: 5px 0;
}
label{
display: inline-block;
width: 100px;
margin-right: 40px;
text-align: right;
}
span{
color: #FF0000;
font-size:12px
}
.inputText{
display: inline-block;
width: 260px;
margin-right: 20px;
}
</style>
<!--
JavaScript Verification requirements:
1.Each item must be filled in or selected, and cannot be empty;+++++++++
2.User name: can only contain English letters and underscores, length is 6-18 A character;++++++++
3.Password: it must contain English letters in upper and lower case and numbers, and the length cannot be less than 6 characters;++++++
4.Confirm password: must be the same as the password;
5.Contact number: ensure the validity of mobile number;+++++++++
6.E-mail: to ensure the effectiveness of e-mail;+++++++++
7.If the user does not input the information according to the above requirements, when the cursor leaves the item, the corresponding prompt information will be given in red font on the right side of the item.++++++
-->
<script>
// User name
function YHMonblus(){
var username=document.getElementById("username");
// var reN =/^\d{6,18}$/;
var re = /^[a-zA-Z_]{6,18}$/;
if(username.value==""){
document.getElementById('YHMerror').innerText="enter one user name";
}
else if(username.value.length < 6 ||username.value.length > 18){
console.log(username.value);
document.getElementById('YHMerror').innerText="Format error,Length should be 6-18 Character";
}
else if(!re.test(username.value)){
document.getElementById('YHMerror').innerText="Format error,Can only contain English letters and underscores";
}
else {
document.getElementById('YHMerror').innerText ="";
}
}
function YHMonfocu(){
document.getElementById('YHMerror').innerText ="";
}
// Password
function MMonblus(){
var password=document.getElementById("password");
var re = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z]{6,}$/;
// var reg=/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/;
if(password.value==""){
document.getElementById('MMerror').innerText="Please input a password";
}
else if(password.value.length < 6){
document.getElementById('MMerror').innerText="Format error,,Password length is at least 6 digits";
}
else if(!re.test(password.value)){
document.getElementById('MMerror').innerText="Format error,Must contain English letters, case and number";
}
else {
document.getElementById('MMerror').innerText ="";
}
}
function MMonfocu(){
document.getElementById('MMerror').innerText ="";
}
// Confirm password
function QRMMonblus(){
var password=document.getElementById("password");
var confirmPassword=document.getElementById("confirmPassword");
if(confirmPassword.value==""){
document.getElementById('QRMMerror').innerText="Please enter the confirmation password";
}
else if(password.value != confirmPassword.value){
document.getElementById('QRMMerror').innerText="Two password entries are inconsistent";
}
else {
document.getElementById('QRMMerror').innerText ="";
}
}
function QRMMonfocu(){
document.getElementById('QRMMerror').innerText ="";
}
// Gender
function XBonblus(){
// var radios = document.getElementsByName("gender");
// if(radios.checked == false){
// document.getElementById('XBerror').innerText = "please select gender";
// }else {
// document.getElementById('XBerror').innerText ="";
// }
}
function XBonfocu(){
// document.getElementById('XBerror').innerText ="";
}
// hobby
function AHonblus(){
var hobbys = document.getElementsByName("hobby");
if(hobbys[0].checked == false&&hobbys[1].checked == false&&hobbys[2].checked == false){
document.getElementById('AHerror').innerText="Please choose a hobby";
}else {
document.getElementById('AHerror').innerText ="";
}
}
function AHonfocu(){
document.getElementById('AHerror').innerText ="";
}
// Contact number
function LXDHonblus(){
var phone=document.getElementById("phone");
var re = /^1\d{10}$/;
if(phone.value==""){
document.getElementById('LXDHerror').innerText="Please enter the contact number";
}
else if(!re.test(phone)){
document.getElementById('LXDHerror').innerText="Phone format input error";
}
else {
document.getElementById('LXDHerror').innerText ="";
}
}
function LXDHonfocu(){
document.getElementById('LXDHerror').innerText ="";
}
// Mail box
function DZYXonblus(){
var email=document.getElementById("email");
var re= /[a-zA-Z0-9]{1,10}@[a-zA-Z0-9]{1,5}\.[a-zA-Z0-9]{1,5}/;
if(email.value==""){
document.getElementById('DZYXerror').innerText="Please enter email";
}
else if(!re.test(email.value)){
document.getElementById("DZYXerror").innerHTML="Incorrect mailbox format";
}
else {
document.getElementById('DZYXerror').innerText ="";
}
}
function DZYXonfocu(){
document.getElementById('DZYXerror').innerText ="";
}
</script>
<body>
<form method="" action="post" name="frm">
<div >
<label>User name</label>
<input type="text" id="username" class="inputText" placeholder="Please enter your user name" onfocus="YHMonfocu()" onblur="YHMonblus()" />
<span id="YHMerror">
</span>
</div>
<div>
<label>Password</label>
<input type="password" id="password" class="inputText" placeholder="Please enter your password" onfocus="MMonfocu()" onblur="MMonblus()"/>
<span id="MMerror">
</span>
</div>
<div>
<label>Confirm password</label>
<input type="password" id="confirmPassword" class="inputText" placeholder="Please confirm your password" onfocus="QRMMonfocu()" onblur="QRMMonblus()"/>
<span id="QRMMerror">
</span>
</div>
<div>
<label>Gender</label>
<input type="radio" name="gender" value="male" onfocus="XBonfocu()" onblur="XBMonblus()" checked="true"/>male
<input type="radio" name="gender" value="female" onfocus="XBMonfocu()" onblur="XBMonblus()"/>female
<span id="XBerror">
</span>
</div>
<div>
<label>hobby</label>
<input type="checkbox" name="hobby" value="Coding" onfocus="AHonfocu()" onblur="AHonblus()"/>Writing code
<input type="checkbox" name="hobby" value="Running" onfocus="AHonfocu()" onblur="AHonblus()"/>Run
<input type="checkbox" name="hobby" value="Sleeping" onfocus="AHonfocu()" onblur="AHonblus()"/>Sleep
<span id="AHerror">
</span>
</div>
<div>
<label>Contact number</label>
<input type="text" id="phone" class="inputText" placeholder="Please enter your contact number" onfocus="LXDHonfocu()" onblur="LXDHonblus()"/>
<span id="LXDHerror">
</span>
</div>
<div>
<label>Mail box</label>
<input type="email" id="email" class="inputText" placeholder="Please enter your email" onfocus="DZYXonfocu()" onblur="DZYXonblus()"/>
<span id="DZYXerror">
</span>
</div>
</form>
</body>
</html>