JS的innerHTML完成注册表

用JS的inner HTML完成注册表的提示功能

就写了一个很简单很简单的注册表，用JS完成了一个简单的验证提示功能

首先把总体的表单写出来，比如用户名，密码之类的
在右边加一个span标签，用innerHTML来写提示的
每一个input记得要加上id，便于后面的调用
input里使用onblur()事件，用于失焦时的检验
使用JS写function用于检验

知识点

innerHTML:设置或返回表格行的开始和结束标签之间的 HTML
onblur:在元素失去焦点时触发,经常用于表单验证代码
type="file":用于文件上传
accept:只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型 (不限制图像的格式，可以写为:accept="image/*")
邮箱的验证主要是用了正则表达式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>注册页面</title>
        <style type="text/css">
            .box{
                height: 200px;
                width: 380px;
                margin: 0 auto;
                margin-top: 100px;
            }
            span{
                color: red;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <form method="post" onsubmit="return check()" name="sub">
                <p>用户名<input type="text" placeholder="请输入用户名" id="uname" onblur="check()"/>
                    <span id="cn">不为空</span>
                </p>
                <p>密码<input type="password" placeholder="请输入密码" id="upd" onblur="checkpassword()"/>
                    <span id="cp">不为空</span>
                </p>
                <p>确认密码<input type="password" placeholder="请重复输入密码" id="reupd" onblur="checkrepd()"/>
                    <span id="recp">确认密码</span>
                </p>
                <p>性别<input type="radio" name="sex" value="nan"/>男<input type="radio" name="sex" value="nv"/>女</p>
                <p>邮箱<input type="text" placeholder="请输入邮箱" id="uemail" onblur="checkemail()"/>
                    <span id="ce">不为空</span>
                </p>
                <p>头像<input type="file" value="选择头像" accept="image/*"/></p>
                <p><input type="submit" value="提交"/>
                    <input type="reset" value="重置" />
                </p>
            </form>
        </div>
        <script type="text/javascript">
            function checkname(){
                var c1=document.getElementById("cn");
                c1.innerHTML="✔";
                var name=document.sub.uname.value;
                if(name==""){
                    c1.innerHTML="用户名不能为空！"
                    document.sub.uname.focus();
                    return false;
                }
                if(name.length<4||name.length>12){
                    c1.innerHTML = "用户名长度为4-12个字符";
        document.sub.uname.select();
return false;
    }
var charname=name.toLowerCase();
for(var i=  0 ;i< name.length; i++){
var charname1=charname.charAt(i);
if(!(charname1 >= 0 && charname1 <= 9 ) && (!(charname1 >= 'a' && charname1 <= 'z')) && (charname1 != '_')){
c1.innerHTML="用户名包含非法字符"
return false;
    }
    }
return true;
    }
function checkpassword(){
var c2=document.getElementById("cp");
c2.innerHTML="✔";
var password=document.sub.upd.value;
if(password==""){
c2.innerHTML="✖ 密码不能为空！"
document.sub.upd.focus();
return false;
    }
if(password.length< 6 ||password.length>12){
c2.innerHTML = "密码长度为6-12个字符";
document.sub.upd.select();
return false;
    }
return true
    }
function checkrepd(){
var c3 = document.getElementById("recp")
c3.innerHTML="✔"
var password=document.sub.upd.value;
var repassword=document.sub.reupd.value;
if(repassword==""){
c3.innerHTML="✖ 确认密码不能为空！"
document.sub.reupd.focus();
return false;
    }
if(password!=repassword){
c3.innerHTML="✖密码不一致"
document.sub.reupd.select();
return false;
    }
return true
    }
function checkemail(){
var c4 = document.getElementById("ce");
var email = document.sub.uemail.value;
var chemail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
c4.innerHTML="✔"
if(email == ""){
c4.innerHTML="✖邮箱不可以为空";
return false;
    }
if(!chemail.test(email)){
c4.innerHTML = "✖格式不正确";
return false;
    }
return true;

    }

function check(){
if(checkname()&&checkpassword()&&checkpassword()&&checkemail()){
return true;
    }else{
return false;
    }
    }
</script>
</body>
</html>

这个就只有很简单的检验功能，没有提交的功能
发消息的那个功能好像也可以使用innerHTML来实现，等我研究完再写（一定要记得）

我写的真的是越来越简短了，明明之前写出来都是很有成就感的，但是现在写出来就像是完成任务一样，一天拖一天，写得一次比一次烂
还要准备六级，害怕又过不了
还是认真学的时候想学的时候效率高，不然一整天都不知道干了什么

posted on 2020-11-29 23:15 bell_* 阅读(125) 评论(0) 编辑收藏举报