表单验证方式的通用化

此文是“Web页面表单域验证方式的改进”的续篇。

在上一篇“Web页面表单域验证方式的改进“中，我们通过把验证法则（正则表达式和是否必填字段）写在表单域中，将验证过程和验证法则成功的分离，从而减少了重复代码，使验证变得简单易行，在实际使用中，我们可以把验证过程放在一个JS文件中，对于全输入验证界面，在页面的表单验证部分只需要调用其中的checkForm函数就能进行有效验证，页面上不再需要书写重复性高的JS验证代码；对于复杂的表单，比如其中含有复选框或是需要两个文本框比较的地方，这种方法也可让你不写通用验证代码而把主要精力放在特殊的验证上。这些能减轻不少工作量，让繁琐的工作变得轻松愉快起来。

下面我们看一看这种用法的实际使用。

首先，我们可以把验证过程放在一个JS文件中，具体代码如下：
formchecker.js

/**

* Check form

function checkForm(vform){

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

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

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

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

if(checkResult){

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

}

else{

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

vform.elements[i].focus();

return false;

}

return true;

}

/**

* Check text field in the form

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{

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

var regex=new RegExp(regexStr);

return regex.test(inputValue);

}

/**

* Remove Extra Char in textbox

function removeExtraChar(vTextBox,event){

var maxlength=parseInt(vTextBox.getAttribute("maxlength"));

var inputValue=vTextBox.value;

if(inputValue.length>=maxlength){

event.keyCode=9;

}

下面想验证一个用户登录页面，它的页面部分代码如下：

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

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

<html>

<head>

<title>"我的事务备忘录"用户登录页面</title>

type="text/css" />

</head>

<body>

String msg = (String) request.getAttribute("Msg");

if (msg != null) {

out.print(msg);

}

</tr>

<tbody>

<tr>

<td>

<input type="text"

name="userName"

validChar="[\u4E00-\u9FA5]{2,3}"

isRequired="true"

maxlength="8"

onkeydown="removeExtraChar(this,event)"

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

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

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

</td>

</tr>

<tr>

<td>

<input type="text"

name="userPswd"

validChar="\w+"

isRequired="true"

maxlength="8"

onkeydown="removeExtraChar(this,event)"

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

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

<span id="userPswdMsg" class="feedbackHide">密码必须输入英语或数字</span>

</td>

</tr>

<tr>

</tr>

<tr>

<td colspan="2" align="center">如果没有用户请点击这里<a href='ShowPage?page=register'>注册</a></td>

</tr>

</tbody>

</table>

</form>

</td>

</tr>

</table>

<div>

</body>

</html>

请注意其中没有任何页面验证的JS代码，只有在表单验证的地方调用formchecker.js中的函数。

不需要写JS代码，只需要引入formchecker.js，就实现了表单的验证，下面是验证效果之一：

对于复杂一些的页面，在formchecker.js的帮助下也能有效减少验证代码量，你只要书写一些特殊的通过validchar不能验证的代码即可，比如说如下注册页面：

你只要书写两次密码比较的JS代码，其它的还是可以让checkForm函数帮你完成。具体代码如下：

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>"我的事务备忘录"用户注册页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="web/js/ajax.js" type="text/javascript"></script>
<script src="web/js/formchecker.js" type="text/javascript"></script>
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
    type="text/css" />
</head>

<body>
<div>
<%
    String msg = (String) request.getAttribute("Msg");
    if (msg != null) {
        out.print(msg);
    }
%>
    
    <table style="border-right: 1px solid; border-top: 1px solid; border-left: 1px solid; border-bottom: 1px solid; boder_top: 0px" bordercolor="#236d78" cellspacing="0" cellpadding="0" width="530" align="center" border="0">
        <tr bgcolor="#eaecf5" height="25">
        <td colspan=3> <font face=webdings color=#ff8c00>8</font><b> 注册个人用户</b></td>
        </tr>
        <tr bgcolor=#236d78 height=1><td></td></tr>
        <tr bgcolor=#eaecf5 >
        <td bgcolor=#ffffff>
          
          <form action="UserRegister" onsubmit="return check(this);">
          <table width=460 align=center border=0>
            <tbody>
              <tr>
                <td width=70>用户名:</td>
                <td>
                    <input type="text"
                           name="userName"
                           validChar="[\u4E00-\u9FA5]{2,3}"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userNameMsg" class="feedbackHide">用户名必须输入两到三位汉字</span>
                </td>
              </tr>
              <tr>
                <td width=70>密码:</td>
                <td>
                    <input type="text"
                           name="userPswd"
                           validChar="\w+"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userPswdMsg" class="feedbackHide">密码必须输入英语或数字</span>
                </td>
              </tr>
              <tr>
                <td width=70>再次输入密码:</td>
                <td>
                    <input type="text"
                           name="userPswd2"
                           validChar="\w+"
                           isRequired="true"
                           onfocus="this.style.backgroundColor='#e6e6e6'"
                           onblur="this.style.backgroundColor='#ffffff'"/>
                    <font color=red> (必填)</font>
                    <span id="userPswd2Msg" class="feedbackHide">密码必须输入英语或数字</span>
                </td>
              </tr>
              <tr>
                <td></td>
                <td><input type="submit" value="注册"/></td>
              </tr>
            </tbody>
          </table>
          </form>
          
        </td>
      </tr>
    </table>
    
<div>
</body>
</html>

<script LANGUAGE="JavaScript">

</script>

注意看上面的js代码比常规方案减少了多少。

如果页面上有其它控件如复选框，列表框等也可照此办理，把文本框的通用验证交给formchecker.js的checkForm和checkTextBox进行，在页面的js代码中只写特殊的处理，这样能减轻不少工作量，让繁琐的工作变得轻松愉快起来。

posted on 2008-04-07 21:41 sitinspring 阅读(2320) 评论(7) 编辑收藏所属分类: Web开发、JavaScript

# re: 表单验证方式的通用化 2008-04-07 23:11 王能

http://www.bt285.cn 这个BT网站,与http://yaonba.com.cn NBA中文网
表单也是用这个的说. 回复更多评论

# re: 表单验证方式的通用化 2008-04-08 13:52 BeanSoft

建议看看 EasyValidation 思路差不多，不过貌似它们做的更模块化一些，呵呵。回复更多评论

# re: 表单验证方式的通用化 2008-04-08 21:49 如坐春风

@BeanSoft

你推荐的EasyValidation很有参考价值，应该从其中汲取营养。谢谢推荐。回复更多评论

# re: 表单验证方式的通用化 2008-04-09 12:51 javaest

我在考虑通过对JAVA对象的标注，生成前端JS的验证代码，同时服务器端也可以通过标注去验证CLICENT端传来的数据是否正确，这样，两个数据层面的验证得到了统一和极大的简化回复更多评论

# re: 表单验证方式的通用化 2008-04-10 08:37 如坐春风

@javaest

是否类似Struts的Validator的做法? 回复更多评论

# re: 表单验证方式的通用化 2008-05-08 10:11 龙震

<input />元素增加很多冗余的属性，W3C validation 无法通过，我不知道作者是否关注这方面的问题？赐教！回复更多评论

# re: 表单验证方式的通用化 2008-05-08 11:30 如坐春风

@龙震

客气了!

验证的方便性和标准化确实不能兼顾,为方便性考虑只能先顾一头了.没有办法. 回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理
相关文章: 表单的设计浅谈分页技术及其实现 Web页面表单域验证方式在Struts1.3.8中的使用按钮按下效果的左侧导航栏实现通用化Web表单验证方式的改进方案使用commons-fileupload实现单个和多个文件上传 JFreeChat四种图表的绘制例程表单验证方式的通用化 Web页面表单域验证方式的改进使用DOM操作表格

# re: 表单验证方式的通用化 2008-04-07 23:11 王能

# re: 表单验证方式的通用化 2008-04-08 13:52 BeanSoft

# re: 表单验证方式的通用化 2008-04-08 21:49 如坐春风

# re: 表单验证方式的通用化 2008-04-09 12:51 javaest

# re: 表单验证方式的通用化 2008-04-10 08:37 如坐春风

# re: 表单验证方式的通用化 2008-05-08 10:11 龙震

# re: 表单验证方式的通用化 2008-05-08 11:30 如坐春风

春风博客

导航

统计

公告

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

表单验证方式的通用化

评论