自己做了个UI登录界面，主体部分如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="css/first.css">
</head>
<div>
<div id="loginbox">
<h2>欢迎登录</h2>
<form class="form" action="#" method="get">
<div class="item">
<input type="text" placeholder="姓名"用户 id="fullname" maxlength="4"> </div>
<div class="item">
<input type="password" placeholder="密码" id="password" maxlength="8">
</div>
<div class="item">
<input type="text" placeholder="邮箱" id="mailaddress" >
</div>
<a class="forgetPass" href="注册.html">注册</a>
<a class="forgetPass" href="#">忘记密码?</a>
<div>
<button type="submit" id="btn" οnclick="formData()">登录</button></div>
</form>
</div>
</div>
<script type="text/javascript">
"use strict"
function formData(){
//进行fullname的正则比较
var tName=fullnameTest(); //return 0或1
//比较电话格式
var rel=passwordTest();
//比较电子邮件
var email=mailaddressTest();
if(tName==1&&rel==1&&email==1){
alert("恭喜你登录成功");
return true;
}else{
var btn=document.getElementsByName("btn");
btn.setAttribute("type","button");
return false;
}
function fullnameTest(){
//获得真实姓名的标签
var trueName=document.getElementById("fullname");
//获得内容,与创建的正则表达式进行匹配
var regExp=/^[\u4e00-\u9fa5]+$/;
if(regExp.test(fullname.value)){
return 1;
}else {
alert("真实姓名输入不和法，姓名必须是汉字");
return 0;
}
}
function passwordTest(){
var rel=document.getElementById("password");
var regExp=/^(\b[0-9a-z]{8}\b[^0-9a-z]?)+$/ig;
if(regExp.test(rel.value)){
return 1;
}else {
alert("请输入八位密码");
return 0;
}
}
function mailaddressTest(){
var email=document.getElementById("mailaddress");
var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
if(reg.test(email.value)){
return 1;
}else {
alert("电子邮件格式错误");
return 0;
}
}}
</script>
</body>
</html>
1814
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
