JavaScript 表单验证规则集合对象实现
作者:小括号时间:2026-10-24 05:26:14浏览:231
本文介绍了一种在 JavaScript 中通过对象封装表单验证规则的方法。定义了包含 required、email 和 url 等验证类型的 errMsg 对象,每个类型包含 msg 提示信息及 test 验证函数。通过正则表达式实现邮箱和网址格式校验,并在页面加载后绑定 onblur 事件触发验证逻辑,实现基础的客户端表单数据合法性检查。
</script>
JavaScript 表单验证规则集合对象实现
代码如下:
<script type="text/javascript">
// 可以将更多的验证规则继续添加到 errMsg 对象中
var errMsg = {
required: {
msg: "This field is required.",
// load 参数指定是否在页面加载时进行验证
test: function(obj, load) {
return obj.value.length > 0 || load || obj.value == obj.defaultValue;
}
},
},
email: {
msg: "Not a valid email address.",
test: function(obj) {
return /^[a-z0-9A-Z+_.-]+\@([a-z0-9A-Z-_]+\.)+[a-z0-9]{2,4}$/i.test(obj.value);
}
},
},
url: {
msg: "Not a valid URL.",
test: function(obj) {
return obj.value == "http://" || /^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$\/.test(obj.value);
}
}
}
},
// 示例代码
onload = function() {
$("url").onblur = function() {
if (errMsg.url.test(this)) {
alert("right");
} else {
}
}
}
alert(errMsg.url.msg);作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
