不错的form javascript validator

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 795 阅读

文章标签：

#javascript #正则表达式 #div #input #include #table

JSP 筆記专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用自定义属性和JavaScript简化表单验证的方法。通过在input标签中定义validChar和isRequired属性，并结合JavaScript遍历表单元素，实现对不同字段的有效验证。

以前每有单验证，都会写很多javascript，而且是重复的，现在找到一种很简单的方法，分享给大家，也忘记是哪个网友贴的，反正谢谢了。
这里主要是给input标签自定义两个validChar , isRequired attribute,然后在javascript里遍历form element,不废话了，code 贴来看看就知道了
---------------------------------------------------------------------------------------------------------------------------------------------------
LZValidator.html
---------------------------------------------------------------------------------------------------------------------------------------------------

<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>JavaScript验证表单字段</title>

</head>

/**

* 提交前检查

function check(vform){

// 遍历表单中每个表单域

for(var i=0;i<vform.elements.length;i++){

if(vform.elements[i].type=="text"){

// 如果表单域是文本框的话,进行定义好的验证

// 取得验证结果

var checkResult=checkTextBox(vform.elements[i]);

//alert(checkResult);

// 取得文本框名

var name=vform.elements[i].getAttribute("name");

if(checkResult){

// 验证通过

document.getElementById(name+"Msg").className="feedbackHide";

}

else{

// 验证不通过，显示提示文字并置焦点

document.getElementById(name+"Msg").className="feedbackShow";

var mesg=document.getElementById(name+"Msg").innerHTML;

alert(mesg);

vform.elements[i].focus();

return false;

}

return true;

}

/**

* 检查文本框

function checkTextBox(vTextBox){

// 取得文本框中允许输入的合法文字正则表达式

var validChar=vTextBox.getAttribute("validChar");

// 取得文本框中是否必须检查的标志

var isRequired=vTextBox.getAttribute("isRequired");

// 取得文本框的输入

var inputValue=vTextBox.value;

if(isRequired!="true" && inputValue.length<1){

// 如果是非必填字段且没有输入则返回真

return true;

}

else{

// 否则进行正则表达式验证

//alert("表达式为"+validChar);

//alert("验证的字符串为"+inputValue);

var regexStr="^"+validChar+"$";

var regex=new RegExp(regexStr);

return regex.test(inputValue);

}

</script>

<!--

.feedbackShow{

visibility: visible;

}

.feedbackHide{

visibility: hidden;

}

-->

</style>

<body>

<jsp:include page="/web/page/branch/header.jsp"/>

</div>

<jsp:include page="/web/page/branch/sidebar.jsp"/>

</div>

<td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 
请填入个人信息</b>< /td>

</tr>

<tbody>

<tr>

<td>

<input type="text"

name="code"

validChar="d{4}"

isRequired="true"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

<span id="codeMsg" class="feedbackHide">员工号必须输入四位数字</span>

</td>

</tr>

<tr>

<td>

<input type="text"

name="name"

validChar="[一-龥]{2,3}"

isRequired="true"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

<span id="nameMsg" class="feedbackHide">姓名必须输入两到三位汉字</span>

</td>

</tr>

<tr>

<td>

<input type="text"

name="mail"

validChar="w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*"

isRequired="true"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

<span id="mailMsg" class="feedbackHide">
输入必须符合邮件地址格式，如XX@XXX.XX</span>

</td>

</tr>

<tr>

<td>

<input type="text"

name="expense"

validChar="d+(.d{0,2})*"

isRequired="false"

onfocus="this.style.backgroundColor='#e6e6e6'"

onblur="this.style.backgroundColor='#ffffff'"/>

<span id="expenseMsg" class="feedbackHide">请输入合法的费用格式，如1.23</span>

</td>

</tr>

<tr>

</tr>

</tbody>

</table>

</form>

</td>

</tr>

</table>

</div>

<jsp:include page="/web/page/branch/footer.jsp"/>

</div>

</body>

</html>

---------------------------------------------------------------------------------------------------------------------------------------------------
上面的汉字正则表达式可能有误，补充汉字的编码区间为[/u4E00-/u9FA5]。就这些了，运行看看结果喽