<script type="text/javascript"

   src="${pageContext.request.contextPath}/js/jquery.js"></script>
   <script type="text/javascript"
   src="${pageContext.request.contextPath}/js/jquery.validate.js"></script>
<script type="text/javascript">
   /**
    *自定义验证方法
    */
   $.validator.addMethod("usernameCheck", function(value, element, param) {
       var pattern = /^[0-9a-zA-Z\u4e00-\u9fa5]{4,20}$/;
       var flag = pattern.test(value);
       if (!flag) {
           return false;
       }
       return true;
   });
   $.validator.addMethod("NoNameCheck", function(value, element, param) {
       var pattern = /^[0-9a-zA-Z]{4,20}$/;
       var flag = pattern.test(value);
       if (!flag) {
           return false;
       }
       return true;
   });
   $(function() {
       $("#userAddForm").validate({
           rules : {
               "username" : {
                   required : true,
                   usernameCheck : true,
                   remote : {
                       url : '${pageContext.request.contextPath}/uservalidateAction_checkUserName.action',
                       type : 'post',
                       dataType : 'json',
                       data : {
                           "username":function(){
                               return $("#username").val();
                           }
                       }
                   }
               },
               "userNo" :{
                   required : true,
                   NoNameCheck: true,
                   remote : {
                       url : '${pageContext.request.contextPath}/uservalidateAction_checkUserNo.action',
                       type : 'post',
                       dataType : 'json',
                       data : {
                           "userNo":function(){
                               return $("#userNo").val();
                           }
                       }
                   }
               },
               "password" :{
                   required : true,
                   NoNameCheck : true
               },
               "roleId" :{
                   required : true
               },
               "phone" : {
                   digits:true,
                   rangelength:[11,11]
               },
               "email" : {
                    email: true
               }
           },
           messages : {
               username : {
                   required : "用户名不能为空",
                   usernameCheck : "用户名必须输入字母、数字或汉字 4-20个字符",
                   remote: "用户名已存在"
               },
               userNo : {
                   required : "用户账号不能为空",
                   NoNameCheck : "用户账号必须输入字母或数字 4-20个字符",
                   remote: "用户账号已存在"
               },
               password :{
                   required : "密码不能为空",
                   NoNameCheck : "密码必须输入字母或数字 4-20个字符"
               },
               roleId :{
                   required : "请选择角色"
               },
               phone: {
                   digits: "请输入11位电话号码",
                   rangelength: "请输入11位电话号码"
               },
               email : {
                   email : "请输入正确的Email格式"
               }
           }
       });
       $("#userSubmit").click(function() {
           $("#userAddForm").submit();
       });
   });
   </script>
</head>
<body>
 人员管理—人员新增
<form id="userAddForm" action="${pageContext.request.contextPath}/tuserAction!add.action" method="post">
  <table style="width: 600px;" border="1px" cellpadding="0" cellspacing="0">
    <tr>
      <td style="width: 100px;height: 60px;" align="center" valign="top">姓名：</td>
      <td><input id="username" name="username" style="width:180px;margin-left: 20px;"/></td>
    </tr>
    <tr>
      <td style="width: 100px;height: 60px;" align="center" valign="top">帐号：</td>
      <td><input id="userNo" name="userNo" style="width:180px;margin-left: 20px;"/></td>
    </tr>
     <tr>
      <td style="width: 100px;height: 60px;" align="center" valign="top">密码：</td>
      <td><input name="password" style="width:180px;margin-left: 20px;"/></td>
    </tr>
    <tr>
      <td style="width: 100px;height: 60px;" align="center" valign="top">角色：</td>
      <td>
        <s:select name="roleId" headerValue="请选择角色" list="#request.roles" headerKey=""
         listKey="roleId" listValue="roleName" multiple="false" theme="simple"/>
      </td>
    </tr>
    <tr>
      <td style="width: 100px;height: 60px;" align="center" valign="top">联系电话：</td>
      <td><input name="phone" style="width:180px;margin-left: 20px;"/></td>
    </tr>
    <tr>
      <td style="width: 100px;height: 60px;" align="center" valign="top">电子邮件：</td>
      <td><input name="email" style="width:180px;margin-left: 20px;"/></td>
    </tr>
  </table>
   <div style="margin-top: 10px;margin-left: 200px;">
       <input id="userSubmit" type="submit" value="提交"/> 　　　　　　　　　　
       <input type="button"value="返回" οnclick="javascript:window.location.href='${pageContext.request.contextPath}/tuserAction!findUser.action'"/>
   </div>
</form>