jQuery Validate 前端校验

最新推荐文章于 2024-03-14 07:00:00 发布

1学习者1

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量439

点赞数

分类专栏： jquery 前端插件文章标签：前端校验 validate jquery-validate

本文链接：https://blog.csdn.net/u011280778/article/details/94721957

版权

前端插件同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

参考自：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>