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

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

 

上一篇:Struts基于validate方法手动完成输入校验


下一篇:编译wxWidgets