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">&times;</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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/413411.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！