本文介绍了一种在 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);