JS校验与最终登陆界面功能完整示例
程序员文章站
2022-04-14 15:12:16
本文实例讲述了js校验与最终登陆界面功能。分享给大家供大家参考，具体如下：
本文实例讲述了js校验与最终登陆界面功能。分享给大家供大家参考，具体如下：
<html>
<head>
<title>注册页面</title>
<meta charset="utf-8"/>
<script type="text/javascript">
// 校验用户名
function checkuname(){
// 获取用户名对象
var uname=document.getelementbyid("uname").value;
// 创建校验正则表达式判断条件
var reg=/^[\u4e00-\u9fa5]{2,4}$/; //其中前面的一部分是汉字的正则表达式，后面的是汉字的合法范围,（第一次因为,正则表达式写错了）
// 获取后面的提示字
var namespan=document.getelementbyid("namespan"); //span是一个没有特殊含义的自定义标签用来辅助设计
// 进行校验
if(uname=="" || uname ==null){
namespan.innerhtml="用户名不能为空";
namespan.style.color="red";
return false;
}else if(reg.test(uname)){
namespan.innerhtml="用户名合法";
namespan.style.color="green";
return true;
}else{
namespan.innerhtml="用户名不合法";
namespan.style.color="red";
return false;
}
}
function checkpassword(){
// 获取用户名对象
var password1=document.getelementbyid("pws1").value; //我们是通过对象的value值（文本输入框的内容）进行判断的
// 创建校验正则表达式判断条件
var reg=/^[a-z]\w{4,8}$/; //首位为字母，后面为数字4到8位 ()
// 获取后面的提示字
var pwsspan=document.getelementbyid("passwordspan"); //span是一个没有特殊含义的自定义标签用来辅助设计
// 进行校验
if(password1=="" || password1 ==null){
pwsspan.innerhtml="*密码不能为空";
pwsspan.style.color="red";
return false;
}else if(reg.test(password1)){
pwsspan.innerhtml="*密码合法";
pwsspan.style.color="green";
return true;
}else{
pwsspan.innerhtml="*密码不合法";
pwsspan.style.color="red";
return false;
}
// return password1.value;
checkpassworded(); //在失去焦点的时候(调用该函数时，也进行确认密码的校验)，如果没有这个操作，当重新修改用户密码时，其不会在进行确认密码(即修改密码后即使不相同也不会报错)
}
// 校验确定密码
function checkpassworded(){
// 获取确认密码对象
var password2=document.getelementbyid("pws2").value;
// 获取第一次密码对象,以进行比较
var password1=document.getelementbyid("pws1").value;
// 获取提示语的对象
var pwslspan=document.getelementbyid("passwordlspan");
// reg=checkpassword();
// if(reg="" || reg=null) //没能实现
if(password2=="" || password2==null){ //null就是字符串类型，表示空字符串
pwslspan.innerhtml="*确认密码不能为空";
pwslspan.style.color="red";
return false;
}else if(password1 == password2){
pwslspan.innerhtml="*两次密码相同";
pwslspan.style.color="green";
return true;
}else{
pwslspan.innerhtml="*两次密码不相同";
pwslspan.style.color="red";
return false;
}
}
//--------------------------------------------------------------------------------------------------------
// 考虑到有很多的校验方法都用到相同的方法和结构,所以我们在此对其进行封装
function checkall(id,reg){ //封装的基本思想：相同的直接写入，不同的利用参数转换
//接收传递的对象
var inp=document.getelementbyid(id); //我们传的参数是带双引号的
var ie=inp.value; //我们通过对象的值进行判断
var alt=inp.alt; //通过对象来获得其对应的一些值
//接收传递的提示框对象
var span=document.getelementbyid(id+"span");
if(ie=="" || ie==null){
span.innerhtml=alt+"不能为空";
span.style.color="red";
return false;
}else if(reg.test(ie)){
span.innerhtml=alt+"合法";
span.style.color="green";
return true;
}else{
span.innerhtml=alt+"不合法";
span.style.color="red";
return false;
}
}
// 手机号的校验
function checkphone(){
return checkall("phone",/^1[3,4,5,7,8]\d{9}$/);
}
// 邮箱的校验
function checkmail(){
return checkall("mail",/^([a-za-z0-9_-])+@([a-za-z0-9_-])+(.[a-za-z0-9_-])+$/);
}
// 添加验证码
function checkcode(){
// 获取验证码填写对象
var code=document.getelementbyid("code1");
// 获取验证显示对象
var codespan=document.getelementbyid("codespan");
var tag=math.floor(math.random()*9000+1000); //产生四位的整数，math.floor表示向下取整，
codespan.innerhtml=tag;
}
// 校验验证码
function checkcoded(){
// 获取输入的验证码对象
var code2=document.getelementbyid("code1").value;
// 获取显示的验证码对象,以进行比较
var codespan1=document.getelementbyid("codespan");
var code1=codespan1.innerhtml; //通过对象利用其innerhtml属性进行获得，其利用value不正确，没进一步探索
// 获取提示语的对象
var codespan2=document.getelementbyid("codespan2");
// alert(code1); //得到的值是undefined
// alert(code2);
if(code2=="" || code2==null){
codespan2.innerhtml="*验证码不能为空";
codespan2.style.color="red";
return false;
}else if(code1 == code2){
codespan2.innerhtml="*验证码相同";
codespan2.style.color="green";
return true;
}else{
codespan2.innerhtml="*验证码不相同";
codespan2.style.color="red";
return false;
}
}
// 校验选择框
function checkselect(){
// 获取选择框对象
var select=document.getelementbyid("select").value;
// 获取选择框提示对象
var selectspan=document.getelementbyid("selectspan");
// selectspan.style.fontsize="15px";
if(select==0){
selectspan.innerhtml="地址选择不能为空";
selectspan.style.color="red";
return false;
}else{
selectspan.innerhtml=select;
selectspan.style.color="green";
return true;
}
}
// 检测多选框
function checkfav(){
// 获取多选框对象
var fav=document.getelementsbyname("fav");
// 获取多选框提示对象
var favspan=document.getelementbyid("favspan");
favspan.style.fontsize="10px";
for(var i=0;i<fav.length;i++){
if(fav[i].checked){ //fav[i]是一个对象，fav[i].checked是一个值
favspan.innerhtml="选择成功";
favspan.style.color="green";
return true; //选择成功后直接返回
}
} //在整个循环结束后都没有进行选择，才进行不符合提示
favspan.innerhtml="至少选择一个";
favspan.style.color="red";
return false;
}
function checkagree(){
// 当同意公司协议的时候才能进行提交操作
document.getelementbyid("pop").disabled=!document.getelementbyid("agree").checked;
// 当同意公司协议的时候,对应的submit的对应值是true,所以我们利用!把disabled的值赋值为false
}
function checksub(){
// 校验是否可以提交
// 对于所有的校验函数,只要有一个不满足条件,就不能提交
checkuname();
checkpassword();
checkpassworded();
checkphone();
checkmail();
checkcoded();
checkselect();
checkfav(); //当所有值都为true的时候才能进行提交，所以对应的函数有返回值，不满足时返回false，满足时返回true
return checkuname()&&checkpassword()&&checkpassworded()&&checkphone()&&checkmail()&&checkcoded()&&checkselect()&&checkfav();
}
</script>
<style type="text/css">
tr,td,table{
background-color: transparent;
border 0px;
}
span{
font-size: 10px;
}
#codespan{
width: 30px;
height: 25px;
font-size: 20px;
color: black;
background-size: 100%,100%; /*后面三行是使背景图片占满整个区域*/
background-repeat: no-repeat;
background-image: url(../img/0.jpg);
}
#selectspan{
font-size: 15px;
}
#showdiv{
width: 30%;
height: 100%;
background-image: url(../img/5.jpg);
background-size: cover;
background-repeat: no-repeat;
margin-left: 33%;
}
input,select,[type=checkbox],#bigtext{
background-color: transparent; /* 把一些边框背景变为透明的以显示背景*/
}
</style>
</head>
<body onload="checkcode(),checkselect(),checkfav()">
<form action="#" action="get">
<div align="center" id="showdiv">
<table border="1px" cellpadding="5px" cellspacing="0px">
<tr height="29px">
<td width="80px">姓名</td>
<td width="180px">
<input type="text" name="uname" value="" id="uname" onblur="checkuname()"/>
<span id="namespan"></span> <!-- 以焦点的有无来进行判断-->
</td>
</tr>
<tr height="29px">
<td width="80px">邮箱</td>
<td width="180px">
<input type="text" name="mail" value="" id="mail" alt="邮箱" onblur="checkmail()"/>
<span id="mailspan"></span>
</td>
</tr>
<tr height="29px">
<td width="80px">手机号</td>
<td width="180px"> <!--查了很长时间的错误，就因为调用的函数没有用""包含，""在外面了-->
<input type="text" name="phone" value="" id="phone" alt="手机号" onblur="checkphone()"/>
<span id="phonespan"></span>
</td>
</tr>
<tr height="31px">
<td width="80px">密码</td>
<td width="180px">
<input type="password" name="psw" value="" id="pws1" onblur="checkpassword()"/>
<span id="passwordspan"></span>
</td>
</tr>
<tr height="29px">
<td width="80px">确认密码</td>
<td width="180px">
<input type="password" name="psw2" value="" id="pws2" onblur="checkpassworded()"/>
<span id="passwordlspan"></span>
</td>
</tr>
<tr height="31px">
<td>性别</td>
<td>
男<input type="radio" name="sex" value="1" checked="checked" /> 女<input type="radio" name="sex" value="0" />
</td>
</tr>
<tr height="31px">
<td>所在地</td>
<td>
<select name="" id="select" onchange="checkselect()">
<option value="0"></option>
<option value="山东">山东</option>
<option value="北京">北京</option>
<option value="河南">河南</option>
</select>
<span id="selectspan"></span>
</td>
</tr>
<tr height="31px">
<td>爱好</td>
<td> <!--我们对每一个都进行事件触发检验，因为每个选项都是平等的-->
动漫<input type="checkbox" name="fav" id="fav" onclick="checkfav()" value="animation"/>
游戏<input type="checkbox" name="fav" id="fav" onclick="checkfav()" value="game" />
打球<input type="checkbox" name="fav" id="fav" onclick="checkfav()" value="ball" />
<span id="favspan"></span>
</td>
</tr>
<tr height="31px">
<td>个人简介</td>
<td>
<textarea name="introduction" rows="7px" cols="25px" id="bigtext"></textarea>
</td>
</tr>
<tr height="31px">
<td width="80px">验证码</td>
<td width="180px">
<input type="password" name="code" value="" id="code1" onblur="checkcoded()"/>
<span id="codespan" onclick="checkcode()"></span><br />
<span id="codespan2" onclick="checkcoded()"></span>
<!--<a href=""><span id=" rel="external nofollow" codespan" onclick="checkcode()"></span></a>--> <!-- 行内显示一定的距离，可以直接用 -->
</td> <!--可以用a标签把鼠标的图标变成一个小手，但是会触发超链接事件，感觉不提倡-->
</tr>
<tr height="31px">
<td colspan="2" align="center">
<input type="checkbox" name="select" id="agree" value="1" onclick="checkagree()" />是否同意我们的协议
<!--<input type="radio" name="select" id="agree" value="1" />是否同意我们的协议-->
<!--radio是互斥选择，当只有一个的时候，选中了，就取消不了了，要进行一些处理-->
</td>
</tr>
<tr height="31px">
<td colspan="2" align="center">
<input type="submit" value="注册" id="pop" disabled="true" onclick="checksub()"/>
<!--我们可不是所有的情况都可以进行submit-->
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
运行效果：
感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。
ps：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：
javascript正则表达式在线测试工具：
正则表达式在线生成工具：