JavaScript实现注册表单校验功能

最新推荐文章于 2023-12-05 16:42:45 发布

酷爱码

最新推荐文章于 2023-12-05 16:42:45 发布

阅读量1.4k

点赞数 2

分类专栏： JavaScript小作业

本文链接：https://blog.csdn.net/huayula/article/details/111935552

版权

JavaScript小作业专栏收录该内容

28 篇文章 5 订阅

订阅专栏

如图，要求输入用户名失去焦点后用户名不得为空或者小于6个字符，否则就显示提示，密码同理，第二个确认密码只需判断与上一个密码框输入是否一致即可，否则显示两次密码输入不一致，在没有完成校验点击提交按钮跳转不要，都满足校验方可跳转提交，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
</head>
<body>
<form action="xxxx" onsubmit="return sub()">
  用户名：<input name="name" type="text" onblur="usr()"/><span id="1" style="color: red" ></span>  <br>
    密码：<input name="pwd" type="password" onblur="pw()"><span id="2" style="color: red"></span><br>
    确认密码：<input name="pwd1" type="password" onblur="pw1()"/><span id="3" style="color: red"></span><br>
    <input type="submit" value="确认注册">
</form>
</body>
<script>
    function usr() {
        var na=document.querySelector("[name=name]").value;
        if(na==''||na.length<6){
            document.querySelector("[name=name]+span").innerHTML="*用户名不得少于6个字符";
            return false;
        }else {
            document.querySelector("[name=name]+span").innerHTML="";
            return true;
        }
    }
    function pw() {
        var p=document.querySelector("[name=pwd]").value;
        if(p==''||p.length<6){
            document.querySelector("[name=pwd]+span").innerHTML="*密码不得少于6个字符";
            return false;

        }else {
            document.querySelector("[name=pwd]+span").innerHTML="";
            return true;
        }
    }
    function pw1() {
        var p=document.querySelector("[name=pwd]").value;
        var p1=document.querySelector("[name=pwd1]").value;
        if(p!=p1){
            document.querySelector("[name=pwd1]+span").innerHTML="*两次输入密码不一致";
            return false;
        }else {
            document.querySelector("[name=pwd1]+span").innerHTML="";
            return true;
        }
    }
    function sub() {
        var result=usr()&&pw()&&pw1();
       return  result;
    }
</script>
</html>

酷爱码

关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript实现注册表单校验功能

如图，要求输入用户名失去焦点后用户名不得为空或者小于6个字符，否则就显示提示，密码同理，第二个确认密码只需判断与上一个密码框输入是否一致即可，否则显示两次密码输入不一致，在没有完成校验点击提交按钮跳转不要，都满足校验方可跳转提交，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单校验</title></..
复制链接

扫一扫