jQuery网站常用资质表单验证

所属分类:输入-验证

 4255  34  查看评论 (0)
分享到微信朋友圈
X
jQuery网站常用资质表单验证 ie兼容8

更新时间:2022-03-08 08:53:30

通过 up.js来实现图片上传功能,并判断名称,手机号是否输入正确 核心代码:

$(".file").change(function() {
    var idFile = $(this).attr("id");
    var file = document.getElementById(idFile);
    var imgContainer = $(this).parents(".aui-photo"); //存放图片的父元素        
    var fileList = file.files; //获取的图片文件        
    console.log(fileList + "======filelist=====");
    var input = $(this).parent(); //文本框的父亲元素       
    var imgArr = []; //遍历得到的图片        
    var numUp = imgContainer.find(".aui-up-section").length;
    var totalNum = numUp + fileList.length; //图片总的数量可自定义       
    if (fileList.length > 3 || totalNum > 3) {
        alert("你好!上传图片不得超过3张,请重新选择"); //一次选择上传超过3个  自己定义        
    } else if (numUp < 3) {
        fileList = validateUp(fileList);
        for (var i = 0; i < fileList.length; i++) {
            var imgUrl = window.URL.createObjectURL(fileList[i]);
            imgArr.push(imgUrl);
            var $section = $("<section class='aui-up-section fl loading'>");
            imgContainer.prepend($section);
            var $span = $("<span class='aui-up-span'>");
            $span.appendTo($section);
            var $img0 = $("<img class='aui-close-up-img'>").on("click", function(event) {
                event.preventDefault();
                event.stopPropagation();
                $(".aui-works-mask").show();
                delParent = $(this).parent();
            });
            $img0.attr("src", "img/close.png").appendTo($section);
            var $img = $("<img class='aui-to-up-img aui-up-clarity'>");
            $img.attr("src", imgArr[i]);
            $img.appendTo($section);
            var $p = $("<p class='img-aui-img-name-p'>");
            $p.html(fileList[i].name).appendTo($section);
            var $input = $("<input id='actionId' name='actionId' value='' type='hidden'>");
            $input.appendTo($section);
            var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
            $input2.appendTo($section);
        }
    }
    setTimeout(function() {
        $(".aui-up-section").removeClass("loading");
        $(".aui-to-up-img").removeClass("aui-up-clarity");
    }, 4100);
    numUp = imgContainer.find(".aui-up-section").length;
    if (numUp >= 3) {
        $(this).parent().hide();
    }
    $(this).val("");
});
相关插件-验证

jquery多功能表单验证

基于jquery封装的表单验证插件
  验证
 38765  356

简洁实用的jQuery表单验证

jQuery表单验证已经扩展
  验证
 31437  330

jQuery随机验证码插件

点击图片进行更换验证密码
  验证
 30866  350

jquery多功能表单验证2.0(原创)

input输入框验证,多选,单选,下拉验证,可异步修改提示,表单异步提交
  验证
 15141  205

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复