表单验证提示插件validate
admin
2023-06-17 06:21:56
0

此表单验证插件会对表单字段进行验证,实时提示用户输入信息,用户体验非常好,验证提示紧随input框!

以下为表单验证案例代码:


    //引入的插件

    $(document).ready(function(){
        formValidate();                               //表单验证函数
    });
    function formValidate(){
        $("#sendmail").validate({                      //#sendmail表单id
            errorElement : "span",                     //错误信息将放入此标签内
            errorClass: "error_input" ,                //验证出错时使用的css class
            success: "valid" ,                         //自定义验证成功时的动作
            errorPlacement: function(error, element) { //自定义错误消息的显示位置

                element.next().html(error);     //error错误信息,element错误产生的input
            },
                rules: {
                    "from":{
                        required: true
                    },
                    "fromName":{
                        required: true
                    },
                    "to":{
                        required: true
                    },
                    "url":{
                        required: true
                    },
                    "subject":{
                        required: true
                    },
                    "html":{
                        required:true
                    },
                    "contry":{
                        required:true
                    }
                },
            messages: {
                "from":{
                    required: '请输入公司名称'
                },
                "fromName":{
                    required: '请选择省份'
                },
                "to":{
                    required: '请选择城市'
                },
                "url":{
                    required: '请选择县/区'
                },
                "subject":{
                    required: '请输入地址'
                },
                "html":{
                    required:'请选择国家区号'
                },
                "contry":{
                    required:'请选择国家区号'
                }
            },
            submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form

                form.submit();    //提交表单
            }
        });

    };



    .error_input{color:red;}                         //错误提示的样式


    

发件邮箱:

    

发件姓名:

    

收件邮箱:

    

url:

    

发件主题:

    

选择类别:             中国             美国             日本             俄罗斯             法国             德国                  

    

邮件内容:

    

附  件:

相关内容

热门资讯

台官员称岛内高铁延误事故“不排... 【环球网报道】据中时新闻网等台媒5月27日报道,台湾高铁25日因苗栗路段信号异常,导致轨道定位功能消...
国家统计局:1~4月全国规模以... 【大河财立方消息】5月27日,国家统计局发布的数据显示,1—4月份,全国规模以上工业企业实现利润总额...
《给阿嬷的情书》火出圈 在“潮... 电影《给阿嬷的情书》剧照。潮汕宗祠龙形屋檐构件。 河南日报全媒体记者 王佳卉 摄近日,电影《给阿嬷的...
为孤困儿童插上“隐形的翅膀” 在新密市牛店镇参加营会活动的一部分孩子,行走在乡间的田垄上。登山、徒步,跟村民打招呼、拨弄路边的花草...
收麦的时候 想家的时候——“蹲... 豫东平原,麦浪翻涌。5月23日一早,李创业坐上了回老家河南商丘的高铁,看到窗外一望无际的麦田,他说“...
搭好家门口的“就业桥” 5月26日清晨,位于武陟县黄河大道与文化路交叉口的零工市场已是人头攒动,门头的LED大屏滚动播放着最...
烟火气息+中原底蕴 豫篮联赛“... 豫篮联赛吉祥物以东汉瑞兽石辟邪为设计原型。 赛事组委会供图赛场外非遗市集上的面塑。小演员演唱《穆桂英...
豫北小城何以“圈粉”国际大咖 当科幻片中的“意念控物”照进现实,大脑信号便可精准操控康复设备,助力残障患者重启运动能力——前沿的脑...
我国地理信息产业加快打造“空间... 新华社北京5月26日电随着人工智能与地理信息技术深度融合,我国地理信息产业加快打造“空间智能体”,不...