JavaScript DOM表单相关操作之表单验证

最新推荐文章于 2024-07-26 20:46:33 发布

知数SEO

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量556

点赞数 11

分类专栏： JavaScript 文章标签： javascript JSDOM JS表单验证

本文链接：https://blog.csdn.net/weixin_42019349/article/details/135774965

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在大部分的情况下我们希望用户输入的数据是我们理想中的格式，尤其是在用户注册上，一些重要的信息我们是不允许用户乱写的，如手机号，邮箱等。接下来一起看几种表单验证的方式：

1、验证长度

验证长度是比较简单的，input标签元素的maxlength属性可以设置可输入的最大长度

// 用maxlength属性验证
<form>
	姓名：<input type="text" maxlength="10">
</form>
// 需要注意的是这个属性不区分中英文

// 在失去焦点框时验证
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
    <h3>验证字符串长度</h3>
    <input type="text" id="username"><br>
    <span id="message"></span>
</form>
</body>
<script>
    var obj = document.getElementById('username'); // 获取input对象
    obj.onblur = function (){  // 绑定失去焦点事件
        var inputValue = obj.value; // 获取表单输入的值
        var inputLength = inputValue.length;  // 获取表单输入值的长度
        if (inputLength > 5){  // 对长度进行判断
            var spanObj = document.getElementById('message');  // 获取span对象
            spanObj.innerHTML = '输入的长度不能大于5';  //写入提示信息
        }
    }
</script>
</html>