JavaScript与Struts结合使用

     最近开始学习JavaScript，在项目中遇到了JavaScript与Struts结合使用的情况，因为struts的html标签的写法与标准的html标签的写法有一些不同，最开始的时候不知道如何处理，所以上网查了一下两者如何结合使用的例子，感觉说的都不是很清楚，可能是自己理解的不好吧，因此写一篇总结。

     举个很多人都问过的问题，就是想用JavaScript来校验表单元素，在标准的html写法中，每个元素都有id、name属性，大家可以根据情况，用getElementById或是用getElementsByName来得到属性的值，但是在struts中有些标签确没有id和name属性，即使有和标准的html标签的含义也有可能不一样。这里只说一些我是如何用JavaScript来校验struts的标签元素的，其实很简单，struts的标签在生成网页的时候也会转换成标准的html标签，因此只需要看一下相应的jsp页面的源代码就可以了，例如，我们在用struts框架写代码的时候，代码会是这样的：

    

<html:form action="/login.do" styleClass="cmxform">
        <fieldset>
          <legend>登录</legend>
          <html:text property="username" ></html:text><br>
          <html:password property="password"></html:password><br>
          <html:submit/><html:cancel/><html:link href="register.do">注 册</html:link>
         </fieldset>
</html:form>

 我的在查看源代码的时候会看到上面的这段代码变成了如下这个样子：

     <form name="loginForm" method="post" action="/webdisk/login.do" class="cmxform">
        <fieldset>

          <legend>登录</legend>
          <input type="text" name="username" value=""><br>
          <input type="password" name="password" value=""><br/>
          <input type="submit" value="Submit"><input type="submit" name="org.apache.struts.taglib.html.CANCEL" value="Cancel" onclick="bCancel=true;"><a href="register.do">注册</a>
         </fieldset>
     </form>

 所有的struts的标签都转换成了标准的html标签，其中，<form>标签的name属性对应的是struts-config.xml中form-bean的name属性为loginForm的bean（通过form标签的action属性在struts-config.xml中找到对应的action bean，然后能过此action bean的name属性来找到对应的form bean），<form>标签的styleClass属性对应class属性。<html:text>标签的property属性对应的是<input type="text">标签的name属性，以些类推<html:password>标签的property属性对应的是<input type="password">标签的name属性，这样的代码是不是更熟悉呢，哈哈，下面我们就可以开始编写校验代码了，如下：

<script type="text/javascript">
          function validate(){
          var username = document.loginForm.username.value;
          var password = document.loginForm.password.value;
          if(username == null || username == ""){
              alert("用户名不能为空");
          }
          
          if(password == null || password == ""){
             alert("密码不能为空");
          }
    }
	</script>

 

然后分别在<html:text>和<html:password>标签中添加onblur属性，将该方法添加进去onblur="validate()"，这样就能够实现校验了。