JS表单验证

怎扰春意

已于 2022-11-24 22:08:40 修改

阅读量768

点赞数 1

分类专栏： javascript js表单验证文章标签： html javascript 前端 js

于 2022-11-24 22:05:01 首次发布

本文链接：https://blog.csdn.net/qq_53876295/article/details/128026169

版权

javascript 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

js表单验证

1 篇文章 0 订阅

订阅专栏

JS表单验证

这一块内容相信大家在做登录界面时会遇到的问题，今天我们就来探讨一下JS表单验证这块的内容。

form是一个块标签，写在最开始，对其属性input进行包裹，有两个属性值，分别是action以及method,action：指向的是表单提交的地址，提交后会跳到指定地址
地址url的构成：协议：//域名（或IP:端口号）路径？参数信息
method：指数据的提交方式，有post和get
post方式：信息以打包方式发送，信息传递很安全。是推荐的方式。
get方式：信息以明文方式发送，并且会暴露在地址栏中。是默认的方式
从实现效果上看form表单中，需要有我们的input标签，还有我们的span标签，布局我们可以用table表格标签或者ul无序列表等，但是相对于我们想实现的功能table布局会更简单。
在这里，我先给大家看有一下，我做的简略的html的表单：

在这里插入图片描述
效果图展示:

这里给大家展示一下body部分的源码:

<body>
    <div>
        <div id="formTijiao">
            <div>
                <label for="username">用户名:</label><input type="text" name="username" id="name">
                <div id="warning"></div>
            </div>

            <div>
                <label for="password">密码:</label><input type="password" name="pass" id="password">
                <div id="ing"></div>
            </div>
            <div>
                <label for="password">确认密码:</label>
                <input type="password" name="pass1" id="password1">
                <div id="mi"></div>
            </div>
            <div>
                <label>性别:</label>
                <input type="radio" name="radio" value="男" checked="checked">男
                <input type="radio" name="radio" value="女">女
            </div>
            <div id="sex"></div>
            <div>
                <label>年龄:</label>
                <input type="text" name="txtage" id="txtage">
            </div>
            <div id="nian"></div>
            <div>
                <label>年级: </label>
                <select>
					<option value="一年级">一年级</option>
					<option value="二年级" selected>二年级</option>
					<option value="三年级">三年级</option>
				</select>
            </div>
            <div>
                <label>爱好:</label>
                <input type="checkbox" value="画画"><span>画画</span>
                <input type="checkbox" value="打球"><span>打球</span>
                <input type="checkbox" value="跑步"><span>跑步</span>
                <input type="checkbox" value="吃饭"><span>吃饭</span>
            </div>
            <div>
                <label>邮箱:</label>
                <input type="email" name="email1" id="email">
            </div>
            <div id="email1"></div>
            <button id="submit" onclick="mm()">提交</button>
        </div>
    </div>
</body>

2.JavaScript实现动态验证

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
简单点讲，DOM提供了我们通过JS操作HTML节点元素的方法。

通过 id 查找 HTML 元素
通过标签名查找 HTML 元素
通过类名查找 HTML 元素
通过 CSS 选择器查找 HTML 元素
通过 HTML 对象集合查找 HTML 元素

下面我们给大家展示一下怎么使用id获取HTML元素:

 	1.	var username = document.getElementById("name").value;
    2.  var pass=document.getElementById("password").value;
    3.  var age=document.getElementById("txtage").value;
    4.  var pass1=document.getElementById("password1").value;

最后我将JS部分的部分代码实现给大家:

//给用户名和密码框、Email、姓名、手机号分别绑定离焦事件
    document.getElementById("username").onblur = checkUsername;
    document.getElementById("password").onblur = checkPassword;
    document.getElementById("Email").onblur = checkEmail;
    document.getElementById("rename").onblur = checkRename;
    document.getElementById("Telphone").onblur = checkTelphone;
}

//校验用户名
function checkUsername() {
    //获取用户名的值
    var username = document.getElementById("username").value;

    //定义正则表达式
    var reg_username = /^([a-zA-Z0-9_-])/;
    //判断值是否符合正则表达式的规则
    var flag = reg_username.test(username);

    //提示信息
    var s_username = document.getElementById("s_username");

    if (flag) {
        //提示绿色对勾
        s_username.innerHTML = "<img src='../image/gou.png' width='35' height='25'>";
    } else {
        //提示红色错误信息
        s_username.innerHTML = "用户名格式有误！";
    }
    return flag;
}

//校验密码
function checkPassword(){
    //1.获取密码的值
    var password = document.getElementById("password").value;
    //2.定义正则表达式
    var reg_password = /^\w{6,12}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_password.test(password);
    //4.提示信息
    var s_password = document.getElementById("s_password");

    if(flag){
        //提示绿色对勾
        s_password.innerHTML = "<img width='35' height='25' src='../image/gou.png'/>";
    }else{
        //提示红色错误信息
        s_password.innerHTML = "密码格式有误";
    }
    return flag;
}
//校验Email
function checkEmail(){
    //1.获取Email的值
    var email = document.getElementById("Email").value;
    //2.定义正则表达式
    var reg_email = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    //3.判断值是否符合正则的规则
    var flag = reg_email.test(email);
    //4.提示信息
    var s_email = document.getElementById("s_email");

    if(flag){
        //提示绿色对勾
        s_email.innerHTML = "<img width='35' height='25' src='../image/gou.png'/>";
    }else{
        //提示红色错误信息
        s_email.innerHTML = "Email格式有误";
    }
    return flag;
}