在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时不对表单进行...
忙了一天,总算是完成了 因为现在的项目中使用了很多struts标签,原来网上流传的validate.js不能用了,所以狠下心来修改了validate,用了不同的方法实现了通用验证,并且与标签分离,可以与struts标签结合使用
这是一个通用js表单验证，功能不是很强大，但是很实用。
.net2005完美JavaScript通用表单验证函数,只需要包含此文件就可以实现验证功能.
通用表单验证Jquery插件
NULL 博文链接：https://why-rj.iteye.com/blog/963090
万能通用智能JS表单验证，自动匹配正则，使用超级简单方便，纠结了很久哦，觉得好东西还是应该拿出来给大家分享。
js表单验证控制代码大全 /* 目录: 1:js 字符串长度限制、判断字符长度 、js限制输入、限制不能输入、textarea 长度限制 2.:js判断汉字、判断是否汉字 、只能输入汉字 3:js判断是否输入英文、只能输入英文 4:js只能...
这是一个通用的js表单验证，你只需要建立一个静态页面就可以实现表单数据的验证，运用的知识是正则表达式。
JS通用表单验证函数，工作中很好的参考
基于Vue表单通用验证插件
NULL 博文链接：https://wlh269.iteye.com/blog/372222
validator 通用JS表单验证类，JavaScript+XML，内含使用教程，很方便就可以嵌入到你的网页中。
这是目前国内开发的所有JS表单验证框架中最好的一个。理由如下：1、简单，只有一个JS文件，不需要其它相关JS支持。2集成AJAX验证支持。3、验证类型全面。4、极易扩展。 主要功能有： PISX通用表单验证具有以下一些...
Validate通用表单验证Jquery插件.zip。前端js实现 表单多种验证，不需要请求服务器，正则表达式匹配手机号、邮箱、IP地址、身份证、中文等。
通用JS表单验证类_validator实例演示，含有一个说明文档，本验证插件可对表单中常见的电话、字符、邮箱地址、网址、身份证号码、密码、年龄格式、IP格式等特殊的字符格式做出检测判断，避免用户提交到数据库的数据不...
1.vf-cate （可选）元素表单类型，可自动验证；支持：text，number，email，hidden，password，textarea，select，date，checkbox，radio 等 2.vf-type （必填）验证类型[可多个，用 "|" 进行分割]，支持：empty（为...
解压密码为: axiang 博文链接：https://springside.iteye.com/blog/52017
使用JavaScript进行表单验证是目前通用的做法。本文实现了常见的三种基本的表单区域的验证，并给出了一个循环提示的通用的实例，提出了表单验证的需注意的原则