現在都用h5表單進行驗證了，以下方式僅做回憶
https://www.runoob.com/jquery/jquery-plugin-validate.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>jQuery Validate驗證框架詳解</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"></script> <script type="text/javascript"> $(function(){ var validate = $("#myform").validate({ rules:{ myname:{ required:true }, email:{ required:true, email:true }, password:{ required:true, rangelength:[3,10] }, confirm_password:{ equalTo:"#password" } }, messages:{ myname:{ required:"必填" }, email:{ required:"必填", email:"E-Mail格式不正確" }, password:{ required: "不能為空", rangelength: $.format("密碼最小長度:{0}, 最大長度:{1}。") }, confirm_password:{ equalTo:"兩次密碼輸入不一致" } }，
debug: true, //調試模式取消submit的默認提交功能
//errorClass: "label.error", //默認為錯誤的樣式類為：error
focusInvalid: false, //當為false時，驗證無效時，沒有焦點響應
onkeyup: false,
submitHandler: function(form){ //表單提交句柄,為一回調函數，帶一個參數：form
alert("提交表單");
form.submit(); //提交表單
},
}); }); </script> </head>
html:
<body> <form id="myform" method="post" action=""> <p> <label for="myname">用戶名：</label> <!-- id和name最好同時寫上 --> <input id="myname" name="myname" /> </p> <p> <label for="email">E-Mail：</label> <input id="email" name="email" /> </p> <p> <label for="password">登陸密碼：</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">確認密碼：</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <input class="submit" type="submit" value="立即注冊" /> </p> </form> </body> </html>
自定義驗證：
$.validator.addMethod( "zidingyi", //驗證方法名稱 function(value, element, param){ //驗證規則 var reg=new RegExp(/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/); if(!reg.test(value)){ return false; } return true; }, '請填寫正確的身份證號'//驗證提示信息 );
調用方法：
//input驗證 $("#form-article-add").validate({ rules: { p_name: { required: true, }, jm_name: { required: true, }, real_name:{ required:true, maxlength:12, }, grade:{ required:true, }, id_card:{ zidingyi1:true, required:true, },
自己開發功能：
$(function(){ //input驗證 $("#form-article-add").validate({ rules:{ sort:{ required:true, min:1, max:999, digits:true, }, num:{ required:true, min:1, max:999, digits:true, }, price:{ required:true, decimalpoint:true, }, reference:{ required:true, min:1, max:99999 }, starttime:{ required:true, date:true, }, endtime:{ required:true, date:true, }, }, messages: { }, onkeyup:true, debug:true, //debug模式，開啟時submitHandler出錯也不會跳轉頁面 /*保存並提交時執行的事件*/ submitHandler:function(){ var ti=document.getElementById('input_img'); /*if (!ti.files || !ti.files[0]) { return layer.msg('必須選擇詳情圖'); }*/ if (!ti.files || !ti.files[0]) { if(filetype) { ti.files = filetype; if(!ti.files) { return layer.msg('必須選擇詳情圖'); } }else{ return layer.msg('必須選擇詳情圖'); } } var tii=document.getElementById('input_hxi'); /*if (!ti.files || !ti.files[0]) { return layer.msg('必須選擇歷史小圖'); }*/ if (!tii.files || !tii.files[0]) { if(historyimg) { tii.files = historyimg; if(!tii.files) { return layer.msg('必須選擇歷史小圖'); } }else{ return layer.msg('必須選擇歷史小圖'); } } //判斷基准為小數后兩位 var referenceid=document.getElementById("reference").value; var reg = /^\d+(\.\d{1,2})?$/; var isfloat = reg.test(referenceid);//console.log(isfloat); if (referenceid%1 !== 0 && !isfloat){ $("#reference").focus(); return layer.msg('小數后面只能寫兩位'); } var titles=document.getElementById('title').value; if(/[~!@#$^&*()=|{}':;',\[\].<>/?~！@#￥……&*（）——+|{}【】‘；：”“'。，、？]/.test(titles)) { return layer.msg('標題不能含有非法字符'); } if (titles.length>15) { return layer.msg('標題必須小於15個字符'); } var pd=false; layer.confirm('確認添加業績活動?',function() { if (pd) { return; } pd = true; layer.load(0,{ shade:[0.5,'#fff'], zindex:1 }); var formData = new FormData(); formData.append("file0",$("#input_img")[0].files[0]); formData.append("file1",$("#input_hxi")[0].files[0]); formData.append("public_key",'<?php echo C('imgparam')['public_key']; ?>'); formData.append("type",6); $.ajax({ url: '<?php echo C('web_server_url_admin'); ?>', data:formData, processData:false, contentType:false, type: 'POST', dataType: "JSON", success: function (data) { alert(); }, error: function () { layer.msg('圖片上傳連接失敗，請檢查您的網絡連接',function(){layer.closeAll();}) }, }); }); } }); });