表单验证提示插件validate

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

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

<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>    //引入的插件
<script type="text/javascript">
    $(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();    //提交表单
            }
        });

    };

</script>
<style type="text/css">
    .error_input{color:red;}                         //错误提示的样式
</style>
<form action="#" method="post" id="sendmail" name="sendmail">
    <p>发件邮箱:<input id="from" placeholder="银行账号"  name="from" type="email" required/><span></span></p>
    <p>发件姓名:<input id="fromName" placeholder="银行账号" name="fromName" type="text" required/><span></span></p>
    <p>收件邮箱:<input id="to" placeholder="银行账号" name="to" type="email" required/><span></span></p>
    <p>url:<input id="url" name="url" placeholder="银行账号" type="email" required/><span></span></p>
    <p>发件主题:<input id="subject" placeholder="银行账号" name="subject" type="text" required/><span></span></p>
    <p>选择类别:<select id="contry" name="contry">
            <option value ="中国">中国</option>
            <option value ="美国">美国</option>
            <option value="日本">日本</option>
            <option value="俄罗斯">俄罗斯</option>
            <option value="法国">法国</option>
            <option value="德国">德国</option>
        </select>
        <span></span></p>
    <p>邮件内容:<textarea id="html" placeholder="银行账号" name="html" cols="120" rows="6" required></textarea><span></span></p>
    <p>附  件:<input name="submit" type="submit" value="提交"/></p>
</form>
时间: 2024-08-28 22:18:06

表单验证提示插件validate的相关文章

jquery表单验证使用插件formValidator

jquery表单验证使用插件formValidator,可供有需求的朋友参考 1.首先在项目中添加必备js与css  2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/for

python_way day17 jQuery表单验证,插件,文本框架

python_way day17 jQuery表单验证 dom事件绑定 jquery时间绑定 $.each return值的判断 jquery扩展方法 前段插件 jDango文本框架 一,jQuery:表单验证: 1.dom方法提交表单,并验证: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</ti

前端国际化-form表单验证提示语

表单验证的规则对象不要再data里面写入,在computed里面写,就可以了 export default { name: 'index', data() { return { ruleValidate: { name: [ { required: true, message: this.$t("name"), trigger: 'blur' } ] } }; } }; 把上面代码,改成下面这种 export default { name: 'index', data() { retu

form表单验证提示语句

<input id="idcardcode" name="idcardcode" class="form-control"          type="idcardvalidate" required="证件号码不能为空"          data-options="required:true,validType:'idcard'"> <input id="

表单验证神器——jquery.validate插件

jquery.validate.js插件应用举例,ajax方式提交数据. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

表单验证之JQuery Validate控件

概述 jQuery Validation Plugin v1.14.0,基于JQuery,官网http://jqueryvalidation.org/ 该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误提示信息,且已翻译成其他 37 种语言,调用插件包就可以切换为中文等语言. 其他控件parsley.js Version 2.3.9,该插件是基于JavaScript语言的,官网http://parsle

表单验证 bootstrap-validator插件

原文地址:https://www.cnblogs.com/qiaokeli/p/8215346.html

jq中的表单验证插件------jquery.validate

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true               必输字段(2)email:true                  必须输入正确格式的电子邮件(3)date:true               

表单验证插件之jquery.validate.js

提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JQuery表单验证插件jQuery.validate.js</title> <sty