表单验证方式的通用化

此文是“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 如坐春风阅读(983) 评论(7) 编辑收藏所属分类: Web开发、JavaScript

常用链接

留言簿(2)

随笔分类(178)