对我而言，不是自己的发现或发明，介绍给别人的时候总有些心虚。对于使用自定义html标签实现客户端校验方法的启发来自雨亦奇的文章，我仅仅是和同事在实际的开发过程中加以使用并作了一定总结。
使用html自定义标签的方式的确是解决客户端校验的高招。具体的做法如下，我们仍然使用我们有关用户名、密码的例子，这是我们这是使用标签前的user.html文件：
<html>
<head>
<title>html标签测试</title>
</head>
<body>
<form name="checkForm">
用户名<input type="text" name="User_id" ><br>
密码<input type="password" name="Password"><br>
<input type="button" name="checkButton" value="确定" >
</form>
</body>
</html>
作如下处理：
|
标签名称
|
使用说明
|
|
chname
|
表示数据项的中文名称，校验出错使用。
|
|
maxlength
|
表示数据项的最大长达，该长度以字节计算
|
|
datatype
|
表示数据项的数据类型，这个数据类型用户可以根据需要自己定义。对于新的数据类型必须要在文件verify.js中进行配置。
|
|
nullable
|
是否为空，为空，其值为yes。
|
这是要使用的verify.js的源代码：
|
函数名称
|
具体实现代码
|
|
取得字符串的字节长度
|
function strlen(str)
{
var i;
var len;
len = 0;
for (i=0;i<str.length;i++)
{
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
|
|
检测字符串是否为空
|
function isnumber(str)
{
var number_chars = "1234567890";
var i;
for (i=0;i<str.length;i++)
{
if (number_chars.indexOf(str.charAt(i))==-1) return false;
}
return true;
}
|
|
检测字符串是否全为数字
|
function isnumber(str)
{
var number_chars = "1234567890";
var i;
for (i=0;i<str.length;i++)
{
if (number_chars.indexOf(str.charAt(i))==-1) return false;
}
return true;
}
|
|
检测指定文本框输入是否合法
|
function verifyInput(input)
{
var image;
var i;
var error = false;
/* 长度校验 */
if (strlen(input.value)>parseInt(input.maxsize))
{
alert(input.chname+"超出最大长度"+input.maxsize);
error = true;
}
else
/* 非空校验 */
if (input.nullable=="no"&&isnull(input.value))
{
alert(input.chname+"不能为空");
error = true;
}
else
{
/* 数据类型校验 */
switch(input.datatype)
{
case "number": if (isnumber(input.value)==false)
{
alert(input.chname+"值应该全为数字");
error = true;
}
break;
/* 在这里可以添加多个自定义数据类型的校验判断 */
/* case datatype1: ... ; break;
*/
/* case datatype2: ... ; break;
*/
/* ....................................*/
default
: break;
}
}
/* 根据有无错误设置或取消警示标志 */
if (error)
{
image = document.getElementById("img_"+input.name);
image.src="img/warning.gif";
return false;
}
else
{
image = document.getElementById("img_"+input.name);
image.src="img/space.gif";
return true;
}
}
|
|
检测指定Form表单所有应被检测的元素
（那些具有自定义属性的元素）是否合法，此函数用于表单的onsubmit事件
|
function verifyAll(myform)
{
var i;
for (i=0;i<myform.elements.length;i++)
{
/* 非自定义属性的元素不予理睬 */
if (myform.elements[i].chname+""=="undefined") continue;
/* 校验当前元素 */
if (verifyInput(myform.elements[i])==false)
{
myform.elements[i].focus();
return false;
}
}
return true;
}
|
这里是使用标签后的html:
<html>
<head>
<title>html标签测试</title>
</head>
<script language="javascript" src="verify.js"></script>
<body>
<form name="checkForm" method="post" action="return verifyAll(checkForm)">
用户名<input type="text" name="User_id" chname="用户名" nullable="no" maxlength="12" datatype="text" onBular="verifyInput(this)"><br>
密码<input type="password" name="Password" chname="密码" nullable="no" maxlength="10" datatype="text" onBular="verifyInput(this)"><br>
<input type="submit" name="checkButton" value="确定">
</form>
</body>
</html>
verifyInput（）方法主要是做丢失焦点后的校验；
verifyAll()方法使用submit方式提交对表单元素作相应的校验。
如需其他校验，请您增加相应的函数至verfiy.js文件中，然后增加相应的标签、即可使用如检验密码的长度在3-12位，增加标签如下：
|
标签名称
|
使用说明
|
|
minlength
|
表示输入数据的最小长度限制。
|
增加校验函数isValideSize()：
|
函数名称
|
具体实现代码
|
|
判断所取得的对象是否合法
|
function isValideSize(input){
var maxLength = parseInt(input.maxlength);
var minLength = parseInt(input.minlength);
var currentLength = input.length;
var chname = input.chname;
if(currentLength <= maxLength || currentLength >= minLength){
return true;
}else{
alert(chname + “应在”+_minLength+“和”+ maxLength +“之间！”)
input.focus();
return false;
}
}
|
具体使用如下：
<input type="password" name="Password" chname="密码" noable="no" maxlength="10" minlength = “3” datatype="text" onBular="verifyInput(this)&& isValideSize(this) ">
小结：
有关Javascript的诸多使用技巧本文列举了四种方式：基于项目原有代码的、重构后的、JsValidation框架、自定义html标签的。解决方式不同，但其核心思想都是在争对校验这一中心目标进行相应的结构性调整，使其更易于客户端程序员使用、使得开发过程更加清晰、简明。总之化繁为简就是硬道理!
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
