jQuery Validate验证框架详解，提交前验证
现在都用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();}) }, }); }); } }); });
