JS数据验证模块：邮箱、URL、长度及数字验证

62 浏览量更新于2024-09-02 收藏 70KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

该资源提供了一组JavaScript函数的封装，用于数据验证，包括电子邮件（email）、URL、长度和数字验证。这些验证功能旨在提供一种更友好、更直观的方式来提示用户输入错误，而不是采用传统的弹出对话框方式。作者wangzi6hao在2.1版本中优化了代码，当检测到输入错误时，会在对应的输入字段后动态添加一个`<span>`元素来显示错误信息。主要知识点： 1. **JavaScript数据验证**：JavaScript是客户端验证用户输入的有效工具，可以确保数据在提交到服务器之前符合预期格式。在提供的代码中，`checkData`对象包含了多种验证方法，提高了用户体验，因为错误即时反馈，减少了与服务器的交互。 2. **Email验证**：`checkData`对象包含了一个用于验证电子邮件地址的函数，虽然具体实现未给出，但通常会涉及正则表达式，以检查输入是否符合电子邮件地址的格式。 3. **URL验证**：同理，URL验证也会使用正则表达式来检查输入的字符串是否符合URL的结构。 4. **长度验证**：`checkData.length`函数计算字符串的长度，考虑到了中文字符可能占用两个字节的情况。它通过`escape`函数转换字符串并移除中文字符的转义序列，然后计算剩余字符的长度。 5. **数字验证**：虽然代码中没有直接提到数字验证的函数，但通常可以使用`isNaN()`或正则表达式来判断输入是否为数字。 6. **DOM操作**：为了在输入字段后添加错误信息，代码使用了DOM操作。`checkData.appendError`方法首先删除了可能存在的旧错误信息，然后创建一个新的`<span>`元素，设置其颜色为红色，并将错误信息插入其中。这个方法提升了用户体验，因为错误信息直接出现在输入字段附近，清晰可见。 7. **封装与模块化**：`checkData`作为一个对象，封装了各种验证功能，这种设计遵循了模块化编程的原则，使得代码更易于维护和复用。 8. **错误处理**：在用户输入错误时，通过动态添加`<span>`元素而非使用弹窗，这种做法避免了打断用户的操作流程，提高了应用的可用性。 9. **版本控制**：作者提到这是2.1版本，暗示可能存在早期版本，这表明代码经历了迭代和改进，以适应用户需求和技术发展。通过这些函数，开发者可以轻松地集成到自己的表单验证中，为用户提供即时反馈，从而提高表单填写的正确性和用户满意度。

资源详情

资源推荐

js数据验证集合、数据验证集合、js email验证、验证、js url验证、验证、js长度验证、长度验证、js

数字验证等简单封装数字验证等简单封装

前段时间写了一个 js数据验证、js email验证、js url验证、js长度验证、js数字验证等弹出对话框形式的但是,现在不太流行那

种很不友好的方式,于是重写了一个,封装得更加好的,更友好的层形式共享给大家,如果大家使用有bug,请大家给我留言完善,谢

谢了.

js代码

代码如下:

/**

* 数据验证框架.增加了对id字段检查出错时,直接在对应后面添加一< span>元素来显示错误信息.

* @author wangzi6hao

* @version 2.1

* @description 2009-05-16

var checkData = new function() {

var idExt=”_wangzi6hao_Span”;//生成span层的id后缀

/**

* 得到中英文字符长(中文为2个字符)

* @param {}

* str

* @return 字符长

this.length = function(str) {

var p1 = new RegExp(‘%u..’, ‘g’)

var p2 = new RegExp(‘%.’, ‘g’)

return escape(str).replace(p1, ”).replace(p2, ”).length

}

/**

* 删除对应id元素

this.remove = function(id) {

var idObject = document.getElementById(id);

if (idObject != null)

idObject.parentNode.removeChild(idObject);

}

/**

* 在对应id后面错误信息

* @param id:需要显示错误信息的id元素

* str:显示错误信息

this.appendError = function(id, str) {

this.remove(id + idExt);// 如果span元素存在，则先删除此元素

var spanNew = document.createElement(“span”);// 创建span

spanNew.id = id + idExt;// 生成spanid

spanNew.style.color = “red”;

spanNew.appendChild(document.createTextNode(str));// 给span添加内容

var inputId = document.getElementById(id);

inputId.parentNode.insertBefore(spanNew, inputId.nextSibling);// 给需要添加元素后面添加span

}

/**

* @description 过滤所有空格字符。

* @param str:需要去掉空间的原始字符串

* @return 返回已经去掉空格的字符串

this.trimSpace = function(str) {

str += “”;

while ((str.charAt(0) == ‘ ‘) || (str.charAt(0) == ‘???’)

|| (escape(str.charAt(0)) == ‘%u3000’))

str = str.substring(1, str.length);

while ((str.charAt(str.length – 1) == ‘ ‘)

|| (str.charAt(str.length – 1) == ‘???’)

|| (escape(str.charAt(str.length – 1)) == ‘%u3000’))

str = str.substring(0, str.length – 1);

下载后可阅读完整内容，剩余7页未读，立即下载

weixin_38728624

粉丝: 4
资源: 881

JS数据验证模块：邮箱、URL、长度及数字验证

最新资源