在Html中 配置方法如下 :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
var checknNames = [ "userName", "pwd", "email", "phone" ];
var descriptions = [ "用户名", "密码", "邮箱地址", "电话号码" ];
var checkNulls = [ "notnull", "notnull", "notnull", "notnull" ];
var checkTypes = [ "", "", "email", "phone" ];
var checkLengths = [ "8", "6", "20", "30" ];
function clickSubmit() {
checkForm();
}
function checkForm() {
if (!checkFormNotNull("inputForm", checknNames, descriptions,
checkNulls))
return false;
if (!checkFormLength("inputForm", checknNames, descriptions,
checkNulls, checkLengths))
return false;
if (!checkFormType("inputForm", checknNames, descriptions, checkTypes))
return false;
}
</script>
</head>
<body>
<form id="inputForm" name="inputForm" action="" method="post">
<input id="userName" name="userName" type="text" value="" />
<input id="pwd" name="pwd" type="password" value="" />
<input id="email" name="email" type="text" value="" />
<input id="phone" name="phone" type="text" value="" />
<input type="button" value="提交" onclick="clickSubmit()" />
</form>
</body>
</html>
JS验证函数
//根据表单ID验证空值
function checkFormNotNull(formId, checknNames, descriptions, checkNulls) {
var form = document.getElementById(formId);
var elements = form.elements;
for (i = 0; i < checknNames.length; i = i + 1) {
var element = elements(checknNames[i]);
var description = descriptions[i];
var checkType = checkNulls[i];
if (checkType == "" || checkType == "notnull") {
if (element.value == "") {
alert(description + "不能为空!");
return false;
}
}
}
return true;
}
// 根据表单ID验证长度
function checkFormLength(formId, checknNames, descriptions, checkNulls,
checkLengths) {
var form = document.getElementById(formId);
var elements = form.elements;
for (i = 0; i < checknNames.length; i = i + 1) {
var element = elements(checknNames[i]);
var description = descriptions[i];
var checkNull = checkNulls[i];
var checkLength = checkLengths[i];
if (element.type == "text" || element.type == "password") {
if (checkNull == "" || checkNull == "notnull") {
var lengths = getInputLengths(element);
if (lengths > checkLength) {
alert(description + "长度不能超过" + checkLength + "字符!");
return false;
}
}
}
}
return true;
}
// 根据表单ID验证类型
function checkFormType(formId, checknNames, descriptions, checkTypes) {
var form = document.getElementById(formId);
var elements = form.elements;
for (i = 0; i < checknNames.length; i = i + 1) {
var element = elements(checknNames[i]);
var description = descriptions[i];
var checkType = checkTypes[i];
if (element.type == "text" || element.type == "password") {
if (checkType == "email") {
var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (regExp.test(element.value) == false) {
alert(description + "输入不合法!");
return false;
}
}
if (checkType == "phone") {
var regExp = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
if (regExp.test(element.value) == false) {
alert(description + "输入不合法!");
return false;
}
}
if (checkType == "cardId") {
var regExp = "";
if (regExp.test(element.value) == false) {
alert(description + "输入不合法!");
return false;
}
}
}
}
return true;
}
// 计算输入框字符数
function getInputLengths(obj) {
var vname = obj.value;
var count = 0;
for (j = 0; j < vname.length; j = j + 1) {
if (vname.charCodeAt(i) > 256) {
count = count + 2;
} else {
count = count + 1;
}
}
return count;
}
分享到：
相关推荐
5、在表单通过验证提交前disable一个按钮（也可将其它域disable,不能与其它验证同在一个域)，不要求按钮是表单中的最后一个 提交" validatorType="disable"> 6、不验证表单 当validator域值为0时不对表单进行...
本文将深入探讨“js通用表单验证代码”这一主题，以及如何利用JavaScript进行有效的表单验证。 首先，我们要理解JavaScript在表单验证中的角色。JavaScript是一种客户端脚本语言，它可以在用户的浏览器上运行，无需...
**二、通用JS表单验证实现步骤** 1. **获取表单元素**：使用`document.getElementById()`或`document.querySelector()`等方法获取表单及其中的输入元素。 2. **定义验证规则**：根据业务需求定义每种输入类型的验证...
"JS通用表单验证函数1"是一个针对这一需求的解决方案，它提供了一种灵活且可复用的方法来验证不同类型的表单字段。 该资源可能包含一个或多个JavaScript函数，用于验证不同类型的数据，如数字、电子邮件、电话号码...
忙了一天,总算是完成了 因为现在的项目中使用了很多struts标签,原来网上流传的validate.js不能用了,所以狠下心来修改了validate,用了不同的方法实现了通用验证,并且与标签分离,可以与struts标签结合使用
本主题聚焦于“万能通用智能JS表单验证”，这是一种利用JavaScript实现的高效、灵活的表单验证技术。表单验证是用户交互过程中的关键环节，它能够确保用户输入的数据符合预设的规则，从而减少服务器端的压力，提升...
在IT领域，尤其是在Web开发中，表单验证是不可或缺的一部分。通用表单验证Jquery插件是为了提高用户体验和数据安全而设计的。Jquery是一种强大的JavaScript库，它简化了JavaScript的DOM操作，事件处理，动画效果，...
.net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.
基于Vue的表单通用验证插件是为了简化这一过程而设计的。这类插件通常提供了一套灵活的API和指令，帮助开发者轻松实现对表单数据的实时验证。 "bt-vue-validator-plugs-master" 这个压缩包可能包含了一个名为 "bt-...
综上所述，`validator`通用JS表单验证类为开发者提供了强大的工具来管理和验证网页表单的用户输入，它的易用性和灵活性使其成为前端开发的有力助手。通过深入理解和熟练运用，开发者可以创建更加健壮和用户体验优秀...
【最新实用的Validate通用表单验证Jquery插件】是一个高效、灵活的前端验证工具，专为使用Jquery框架的Web开发人员设计。这个插件极大地简化了表单验证的过程，使得用户输入的数据在提交前就能得到有效的检查，从而...
【JS通用表单验证函数】是前端开发中用于确保用户输入数据有效性和合规性的一种常见技术。在网页表单提交前，使用JavaScript进行验证可以提高用户体验，减少无效数据提交到服务器，同时减轻后端处理压力。 这个特定...
本文将详细介绍一种通用的JavaScript（JS）表单校验方法，通过导入特定的JS文件，可以轻松实现对用户输入的验证。 首先，让我们了解什么是JavaScript表单校验。JavaScript是一种客户端脚本语言，它允许我们在用户的...
这是一个通用的js表单验证，你只需要建立一个静态页面就可以实现表单数据的验证，运用的知识是正则表达式。
"Validate通用表单验证Jquery插件"是一款基于JavaScript库jQuery的高效验证工具，它允许开发者在客户端进行多种验证，无需额外的服务器请求，大大提升了应用的响应速度。 Validate插件的核心功能在于其丰富的验证...
本资源提供的"完美表单验证js"就是一个全面的JavaScript解决方案，几乎涵盖了所有常见的表单验证需求，如电话、QQ、Email等。 JavaScript是一种客户端脚本语言，它可以直接在用户的浏览器上运行，无需服务器参与，...
- **可配置性**：允许用户自定义验证规则和错误提示。 - **性能优化**：避免频繁的Ajax请求，如使用debounce或throttle函数控制请求频率。 - **安全性**：确保用户数据的安全，避免因验证过程暴露敏感信息。 至于...
这是目前国内开发的所有JS表单验证框架中最好的一个。理由如下：1、简单，只有一个JS文件，不需要其它相关JS支持。2集成AJAX验证支持。3、验证类型全面。4、极易扩展。 主要功能有： PISX通用表单验证具有以下一些...
三、JavaScript验证表单的方法 JavaScript是一种常用的表单验证方法。JavaScript编写的程序可以由多种浏览器来解释执行，具有较好的兼容性和跨平台性，得到广泛的应用。借助JavaScript的功能，可以使用户在表单中...