温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jquery validate验证

发布时间:2020-08-10 17:51:34 来源:网络 阅读:861 作者:kookyme 栏目:web开发

<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 border="1px" cellpadding="0" cellspacing="0">
    <tr>
      <td align="center" valign="top">姓名:</td>
      <td><input id="username" name="username" /></td>
    </tr>
    <tr>
      <td align="center" valign="top">帐号:</td>
      <td><input id="userNo" name="userNo" /></td>
    </tr>
     <tr>
      <td align="center" valign="top">密码:</td>
      <td><input name="password" /></td>
    </tr>
    <tr>
      <td 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 align="center" valign="top">联系电话:</td>
      <td><input name="phone" /></td>
    </tr>
    <tr>
      <td align="center" valign="top">电子邮件:</td>
      <td><input name="email" /></td>
    </tr>
  </table>
   <div >
       <input id="userSubmit" type="submit" value="提交"/>           
       <input type="button"value="返回" onclick="javascript:window.location.href='${pageContext.request.contextPath}/tuserAction!findUser.action'"/>
   </div>
</form>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI