分享

两个简单的验证用的jquery框架

 走墨 2014-07-14
<%@page import="java.util.Date"%>
<%@page contentType="text/html; charset=UTF-8" %>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="org.my431.util.RandomGuid"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml" xml:lang="en" lang="en">
<head>

<title>${appName}</title>
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html"/>
<link rel="stylesheet" type="text/css" href="${portalLoginUrl}/portal/skins/blue/css/layout.css" />
<link rel="stylesheet" type="text/css" href="${portalLoginUrl}/portal/skins/blue/css/colorskin.css" />
<script type="text/javascript" src="${portalLoginUrl}/portal/skins/blue/js/jquery-1.8.3.min.js"></script>
<script src="${portalLoginUrl}/common/js/lhgdialog/lhgdialog_1.min.js?skin=idialog"></script>
<script type="text/javascript" src="${portalLoginUrl}/portal/skins/blue/js/form.js"></script>
<script src="${portalLoginUrl}/portal/skins/blue/js/jquery-validate/jquery.validate.js" type="text/javascript"></script>
<script src="${portalLoginUrl}/portal/skins/blue/js/jquery-validate/additional-methods.js" type="text/javascript"></script>

<script type="text/javascript" src="${uploadLoginUrl}/resources/uploadify/js/jquery.uploadify.v2.1.0.js"></script>
<link href="${uploadLoginUrl}/resources/uploadify/css/uploadifyStudio.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function(){
jQuery.validator.addMethod("isKeyUnique", function(value, element) {  
var key =$("#key").val();
            var id=$("#appId").val();
   var length =1; 
   $.ajax({
    async: false,
                type:'post',
                url:'${root}/base/BaseResourceApp/checkKey.jspx?key='+key+'&id='+id,
                success:function(msg){
                   
                    if(msg==0){
                    length=0; 
                    }
                }
                  });
         return length==0? true:false;  
}, "key值重复!");  
jQuery.validator.addMethod("isIp", function(value, element) {  
   var length = value.length;     
   var ip  =/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;        
   return (ip.exec(value))? true:false;  
}, "请正确填写正确的ip地址!");  
      
$(".fmsubmit").click(function(){
$("#frm").submit();
});

var validator=$("#frm").validate({ 
       errorClass:"fm-ms-error",//用此设定的样式来定义错误消息的样式
       rules: {           //定义验证规则,其中属性名为表单的name属性  
    name: {  
        required: true,
        maxlength: 200
           },
           ip:{
           required:true,
           isIp:true
              
               
           },
           key: {
            required: true,
            maxlength: 40,
            isKeyUnique:true
           }
       },  
       messages: {       //自定义验证消息  
        name: {  
        required: "资源应用名称不能为空!",
        maxlength: "资源应用名称字数不能超过200"
           },
           ip: {
            required: "资源应用ip不能为空!"
           
           
           },
           key: {
            required: "资源应用key不能为空!",
           maxlength: "资源应用key字数不能超过40"
           }
       },  
       errorPlacement: function(error, element) {
if ( element.is(":radio")|| element.is(":checkbox") || element.is(".st-group-input") || element.is(":file"))
error.appendTo( element.parent().parent());
else
           error.appendTo( element.parent("td") );
},
highlight: function(element, errorClass) {  
    $(element).addClass(errorClass); 
 },  
unhighlight: function(element, errorClass) {  
    $(element).removeClass(errorClass);   
 },
success: function(label) {    
label.addClass("fm-ms-success").html(" ");
},
submitHandler:function(form){
frm.submit();
},
       validClass:"fm-ms-success"//设定当验证通过时,消息显示的样式
   });



});
function goback(){
document.location.href="${root}/base/BaseResourceApp/list.jspx";  
}
</script>


</head>
<body class="wrapr20">
<div class="breadcrumb">当前位置:
    <span>资源</span><i>|</i>
    <span>资源应用管理</span><i>|</i>
    <span>修改</span>
    </div>
    <div class="layoutop tdbd-bot-2">
   <div class="tabtit relative"><h3>资源应用修改</h3></div>
<form name="frm" id="frm" style="margin:0px;padding:0px;" method="post" action="${root}/base/BaseResourceApp/update.jspx">
    <input type="hidden" name="appId"  id="appId" value="${resApp.appId}"> </input>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="tab-bd">
<tr>
<td width="20%" class="text-rt td-gray-2 tdbd-bot">应用名称</td>
<td class="tdbd-bot-2">
<input type="text" name="name" id="name" maxlength="200" value="${resApp.appName}" class="text"/>
</td>
</tr>
<tr>
<td width="20%" class="text-rt td-gray-2 tdbd-bot">应用ip</td>
<td class="tdbd-bot-2">
<input type="text" name="ip" id="ip" maxlength="30" value="${resApp.appIp}" class="text"/>
</td>
</tr>
<tr>
<td width="20%" class="text-rt td-gray-2 tdbd-bot">应用key</td>
<td class="tdbd-bot-2">
<input type="text" name="key" id="key" maxlength="40" value="${resApp.appKey}" class="text"/>
</td>
</tr>
</table>
</form>
<div class="text-ct paddtb20" id="saveup">
    <a class="btn-fm fmsubmit marginr10" href="javascript:;"><b>提交</b></a>
    <a class="btn-fm" href="javascript:;" onclick="goback();"><b>返回</b></a>
</div>
</div>

 <iframe src="" id="uploadIframe" name="uploadIframe" style="height:0px;width:0px;display:none;"></iframe>
 <iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display: none;WIDTH: 0px; HEIGHT: 0px;visibility:hidden;"></iframe>
</body>
</html>


总结: 1 在刚写好代码时发现火狐和360 不兼容,即火狐下是正常的,而360 ie 等不可以,这是仔细检查了代码,发现 【  required: "资源应用ip不能为空!" , 】 后面多了一个逗号,所以一定要严格按照标准来写代码
2 学习如何自定义方法
3 ajax 的非异步

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约