ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQuery Validate验证框架详解,提交前验证

2019-09-18 14:54:21  阅读:207  来源: 互联网

标签:jQuery files layer return 验证 required msg Validate true


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>

 

自己开发功能:

$(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();})
                    },
                });
            });
        }
        
    });
});

 

标签:jQuery,files,layer,return,验证,required,msg,Validate,true
来源: https://www.cnblogs.com/yszr/p/11542142.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有