jQuery Validate 前端校验
生活随笔
收集整理的這篇文章主要介紹了
jQuery Validate 前端校验
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考自：https://www.runoob.com/jquery/jquery-plugin-validate.html
建議：將引入的js，jQuery，css文件下載到自己的本地或者遠程服務器
否則：如果您的網站使用了SSL證書請求的安全策略，注意引用的文件是否是https的安全鏈接。
?
//補充一個自己寫的手機號碼驗證方法，源文件是沒有對中國電話號碼支持的jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;return this.optional(element) || (length == 11 && mobile.test(value)); }, "請正確填寫手機號碼");使用方法：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link href="__TMPL__/public/assets/simpleboot3/themes/simpleboot3/bootstrap.min.css" rel="stylesheet"><script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script><script src="__TMPL__/public/assets/simpleboot3/bootstrap/js/bootstrap.min.js"></script><script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script><link href="__TMPL__/public/plugins/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /><script src="__TMPL__/public/plugins/js/fileinput.js" type="text/javascript"></script><title>舉報活禽非法交易</title> </head> <style>.error{color: #f40;} </style> <body> <form role="form" name="form1" id="form1"><div class="form-group"><label class="col-sm-2 control-label">MS.請選擇您所在的區域</label><div class="col-sm-10"><select class="form-control col-sm-10" name="district_id"><foreach name="districts" id="vo"><option value="{$vo.id}">{$vo.name}</option></foreach></select></div></div><div class="form-group"><label class="col-xs-12 col-sm-12">1.請填寫您的個人信息</label><label for="name" class="col-xs-5 col-sm-2 control-label">姓名</label><div class="col-xs-7 col-sm-10"><input type="text" class="form-control" id="name" placeholder="請輸入姓名" name="report_name"></div></div><div class="form-group"><label for="mobile" class="col-xs-5 col-sm-2 control-label">聯系方式</label><div class="col-xs-7 col-sm-10"><input type="text" class="form-control" id="mobile" placeholder="請輸入聯系方式" name="report_mobile"></div></div><div class="form-group"><label for="lastname" class="col-xs-5 col-sm-2 control-label">義工號（選填）</label><div class="col-xs-7 col-sm-10"><input type="text" class="form-control" id="lastname" placeholder="請輸入義工號（選填）" name="volunteer_no"></div></div><div class="form-group"><label class="col-sm-2 control-label">2.請選擇您的性別</label><div class="col-sm-10"><select class="form-control" name="sex"><option value="0">男</option><option value="1">女</option></select></div></div><div class="form-group"><label class="col-sm-12 control-label">3.請詳細描述清楚活禽交易地址</label><label class="col-sm-12 control-label">（如某區某街道某市場某檔口）</label><div class="col-sm-10"><textarea class="form-control" rows="3" name="remark"></textarea></div></div><div class="form-group"><label class="col-sm-12 control-label">4.活禽交易現場照片</label><label class="col-sm-12 control-label">注：照片能清晰反映銷售活禽的現場照片含背景參照物</label><div class="col-sm-10"><input id="file-1" name="file" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"></div><label class="col-sm-12 control-label">僅允許上傳gif、jpg、png格式圖片</label></div><div id="myAlert" class="alert alert-success" style="display: none"><a href="#" class="close" data-dismiss="alert">×</a></div><div class="col-sm-10"><button type="submit" class="btn btn-primary col-xs-12" id="submit">提交</button></div><input type="hidden" name="imgs" id="imgs"/> </form></body> <script>$("#file-1").fileinput({uploadUrl: '/api/public/uploadFile',allowedFileExtensions : ['jpg', 'png','gif','jpeg'],overwriteInitial: false,browseLabel:'瀏覽',removeLabel:'刪除所有',uploadLabel:'上傳',dropZoneTitle:'可選擇多個文件上傳',maxFileSize: 0,maxFilesNum: 9,//allowedFileTypes: ['image', 'video', 'flash'],slugCallback: function(filename) {//console.log("slugCallback = ",filename);return filename.replace('(', '_').replace(']', '_');}}).on("fileuploaded", function(event, data, previewId, index) {var arr = [];arr.push(data.response.data.filepath);arr = arr.join(',');document.getElementsByName("imgs")[0].value = arr;//console.log("----",document.getElementsByName("imgs")[0].value);});//手機號碼驗證jQuery.validator.addMethod("isMobile", function(value, element) {var length = value.length;var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;return this.optional(element) || (length == 11 && mobile.test(value));}, "請正確填寫手機號碼");function checkForm(){$("#form1").validate({onsubmit:true,rules: {report_name: {required: true //此處就是必填項驗證},report_mobile: {required: true,minlength : 11,isMobile : true},volunteer_no: {minlength : 10,},remark: {required: true}},messages: { //相對應的錯誤提示信息report_name: {required: "請輸入賬號！"},report_mobile: {required:"請輸入有效的手機號！",minlength : "不能小于11個字符",isMobile : "請正確填寫手機號碼"},volunteer_no: {minlength : "義工號是10位"},remark:{required:"請輸入交易地址"}},success:"valid",submitHandler:function(){var data = {};data.district_id = document.getElementsByName("district_id")[0].value;data.report_name = document.getElementsByName("report_name")[0].value;data.report_mobile = document.getElementsByName("report_mobile")[0].value;data.volunteer_no = document.getElementsByName("volunteer_no")[0].value;data.sex = document.getElementsByName("sex")[0].value;data.remark = document.getElementsByName("remark")[0].value;data.imgs = document.getElementsByName("imgs")[0].value;$.ajax({url: "reportPost",data: data,context: document.body,dataType:"json",type:"POST",success: function(res){$("#myAlert span").remove();if (res.code){$("#myAlert").css("display","block").children("a").after( '<span>'+res.msg+'</span>');}else{$("#myAlert").css("display","block").children("a").after( '<span>'+res.msg+'</span>');}}});}});}$(function() {checkForm();//表單數據初始化}); </script> </html>?
總結
以上是生活随笔為你收集整理的jQuery Validate 前端校验的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： em,rem
- 下一篇： 谷歌浏览器文件下载了缓存的问题与解决方案