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

发布时间：2024年01月23日


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

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>

2、正则匹配验证

复杂一点的情况，例如网址等就需要正则表达式来匹配了，关于正则表达式后面会专门出一篇介绍，感兴趣的同学可以关注一下。

文章来源:https://blog.csdn.net/weixin_42019349/article/details/135774965
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章