用户注册界面js校验+表单提示
JavaScript校验要求：
1.每一项都必须填写内容或者做出选择，不能存在空项；
2.用户名：只能包含英文字母和下划线，长度为6-18个字符；
3.密码：必须包含英文字母大小写和数字，长度不能少于6个字符；
4.确认密码：必须与密码相同；
5.联系电话：确保手机号码的有效性；
6.电子邮箱：确保电子邮箱的有效性；
7.如果用户没有按照以上要求输入信息，则当光标离开该项时，在该项的右侧用红色字体给出相应的提示信息。
<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>
