JavaScript verification requirements:
1. Each item must fill in the content or make a choice, and there can be no empty items;
2. Username: can only contain English letters and underscores, and the length is 6-18 characters;
3. Password: required It contains uppercase and lowercase letters 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 the mobile phone number;
6. E-mail: ensure the validity of the e-mail;
7. If the user does not input 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>新用户注册</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校验要求：
1.每一项都必须填写内容或者做出选择，不能存在空项；+++++++++
2.用户名：只能包含英文字母和下划线，长度为6-18个字符；++++++++
3.密码：必须包含英文字母大小写和数字，长度不能少于6个字符；++++++
4.确认密码：必须与密码相同；
5.联系电话：确保手机号码的有效性；+++++++++
6.电子邮箱：确保电子邮箱的有效性；+++++++++
7.如果用户没有按照以上要求输入信息，则当光标离开该项时，在该项的右侧用红色字体给出相应的提示信息。++++++
-->
<script>
// 用户名
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="请输入用户名";
}
else if(username.value.length < 6 ||username.value.length > 18){
console.log(username.value);
document.getElementById('YHMerror').innerText="格式错误,长度应为6-18个字符";
}
else if(!re.test(username.value)){
document.getElementById('YHMerror').innerText="格式错误,只能包含英文字母和下划线";
}
else {
document.getElementById('YHMerror').innerText ="";
}
}
function YHMonfocu(){
document.getElementById('YHMerror').innerText ="";
}
// 密码
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="请输入密码";
}
else if(password.value.length < 6){
document.getElementById('MMerror').innerText="格式错误,,密码长度至少为6位";
}
else if(!re.test(password.value)){
document.getElementById('MMerror').innerText="格式错误,必须包含英文字母大小写和数字";
}
else {
document.getElementById('MMerror').innerText ="";
}
}
function MMonfocu(){
document.getElementById('MMerror').innerText ="";
}
// 确认密码
function QRMMonblus(){
var password=document.getElementById("password");
var confirmPassword=document.getElementById("confirmPassword");
if(confirmPassword.value==""){
document.getElementById('QRMMerror').innerText="请输入确认密码";
}
else if(password.value != confirmPassword.value){
document.getElementById('QRMMerror').innerText="两次密码输入不一致";
}
else {
document.getElementById('QRMMerror').innerText ="";
}
}
function QRMMonfocu(){
document.getElementById('QRMMerror').innerText ="";
}
// 性别
function XBonblus(){
// var radios = document.getElementsByName("gender");
// if(radios.checked == false){
// document.getElementById('XBerror').innerText="请选择性别";
// }else {
// document.getElementById('XBerror').innerText ="";
// }
}
function XBonfocu(){
// document.getElementById('XBerror').innerText ="";
}
// 爱好
function AHonblus(){
var hobbys = document.getElementsByName("hobby");
if(hobbys[0].checked == false&&hobbys[1].checked == false&&hobbys[2].checked == false){
document.getElementById('AHerror').innerText="请选择爱好";
}else {
document.getElementById('AHerror').innerText ="";
}
}
function AHonfocu(){
document.getElementById('AHerror').innerText ="";
}
// 联系电话
function LXDHonblus(){
var phone=document.getElementById("phone");
var re = /^1\d{10}$/;
if(phone.value==""){
document.getElementById('LXDHerror').innerText="请输入联系电话";
}
else if(!re.test(phone)){
document.getElementById('LXDHerror').innerText="电话格式输入错误";
}
else {
document.getElementById('LXDHerror').innerText ="";
}
}
function LXDHonfocu(){
document.getElementById('LXDHerror').innerText ="";
}
// 电子邮箱
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="请输入电子邮箱";
}
else if(!re.test(email.value)){
document.getElementById("DZYXerror").innerHTML="邮箱格式不正确";
}
else {
document.getElementById('DZYXerror').innerText ="";
}
}
function DZYXonfocu(){
document.getElementById('DZYXerror').innerText ="";
}
</script>
<body>
<form method="" action="post" name="frm">
<div >
<label>用户名</label>
<input type="text" id="username" class="inputText" placeholder="请输入您的用户名" onfocus="YHMonfocu()" onblur="YHMonblus()" />
<span id="YHMerror">
</span>
</div>
<div>
<label>密码</label>
<input type="password" id="password" class="inputText" placeholder="请输入您的密码" onfocus="MMonfocu()" onblur="MMonblus()"/>
<span id="MMerror">
</span>
</div>
<div>
<label>确认密码</label>
<input type="password" id="confirmPassword" class="inputText" placeholder="请确认您的密码" onfocus="QRMMonfocu()" onblur="QRMMonblus()"/>
<span id="QRMMerror">
</span>
</div>
<div>
<label>性别</label>
<input type="radio" name="gender" value="male" onfocus="XBonfocu()" onblur="XBMonblus()" checked="true"/>男
<input type="radio" name="gender" value="female" onfocus="XBMonfocu()" onblur="XBMonblus()"/>女
<span id="XBerror">
</span>
</div>
<div>
<label>爱好</label>
<input type="checkbox" name="hobby" value="Coding" onfocus="AHonfocu()" onblur="AHonblus()"/>写代码
<input type="checkbox" name="hobby" value="Running" onfocus="AHonfocu()" onblur="AHonblus()"/>跑步
<input type="checkbox" name="hobby" value="Sleeping" onfocus="AHonfocu()" onblur="AHonblus()"/>睡觉
<span id="AHerror">
</span>
</div>
<div>
<label>联系电话</label>
<input type="text" id="phone" class="inputText" placeholder="请输入您的联系电话" onfocus="LXDHonfocu()" onblur="LXDHonblus()"/>
<span id="LXDHerror">
</span>
</div>
<div>
<label>电子邮箱</label>
<input type="email" id="email" class="inputText" placeholder="请输入您的电子邮箱" onfocus="DZYXonfocu()" onblur="DZYXonblus()"/>
<span id="DZYXerror">
</span>
</div>
</form>
</body>
</html>