zoukankan      html  css  js  c++  java
  • jq中的表单验证插件------jquery.validate

    今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js

    它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可。

    我们常见的校验规则有以下几种:

    (1)required:true               必输字段
    (2)email:true                  必须输入正确格式的电子邮件
    (3)date:true                   必须输入正确格式的日期
    (4)dateISO:true                必须输入正确格式的日期(ISO)
    (5)digits:true                 必须输入整数
    (6)equalTo:"#pass"           输入值必须和#pass相同
    (7)maxlength:5                输入长度最多是5的字符串
    (8)minlength:10               输入长度最小是10的字符串
    (9)rangelength:[5,10]         输入长度必须介于 5 和 10 之间
    (10)range:[5,10]               输入值必须介于 5 和 10 之间
    (11)max:5                      输入值不能大于5
    (12)min:10                     输入值不能小于10

    然后接着写提示字段就可以了,不过可以不写,因为它有英文的提示字段,下面就来请大家看一下以下代码:

    我们在使用插件之前必不可缺的是要引入jquery文件 和插件

    <script src="jquery-1.9.1.js"></script>
    <script src="jquery.validate.min.js"></script>
    然后就来看一下html代码
    <form action="" id="mgForm">  //写表单验证比不缺少的是我们的form标签
    <div> //关于用户名的布局
    <label for="user">username:</label>
    <input type="text" name="username" id="user">
    </div>

    <div>//关于密码的布局
            <label for="pass">password:</label>
    <input type="text" name="password" id="pass">
    </div>
    <div>//重置密码
    <label for="pass1">form-password:</label>
    <input type="text" name="password1" id="pass1">
    </div>
    <div>//年龄
    <label for="age">age:</label>
    <input type="text" name="age" id="age">
    </div>
    <div>//email
    <label for="email">email:</label>
    <input type="text" name="email" id="email">
    </div>
    <input type="submit" value="提交"> //我们在提交数据时提交的按钮应该为submit类型的
    </form>
    接着再来看一下js代码
           $(function () {
    $("#mgForm").validate({
    rules:{//写入文本框中的限制条件
    username:{ //指的是input中name的名字
    required:true,//不能为空
    minlength:6,//最短为6个
    maxlength:10//最长为10个
    },
    age:{
    // range:[18,80] //年龄范围为18-80
    required:true, //不能为空
    },
    password:{
    required:true,//必填
    rangelength:[2,6] //长度为2-6
    },
    password1:{
    equalTo:"#pass" //重置密码必须与#pass中的密码保持一致
    },
    email:{
    email:true //email保证格式正确
    }
    },
    messages:{//提示信息
    username:{ //用户名
    required:"*此项必填",
    minlength:"*用户名最小是6位",
    maxlength:"*用户名最大是10位"
    },
    age:{//年龄
    range:"*年龄必须在18-80之间"
    PostCode:"错误"
    },
    password:{//密码
    required:"*必填",
    rangelength:"2-6"
    },
    password1:{//重置密码
    equalTo:"*密码不一致"
    },
    email:{//邮箱格式
    email:"*邮箱格式不正确"
    }
    },
    submitHanfler:function () {//如果全部验证正确就弹出弹窗
    alert("全部通过")
    },
    errorClass:"wrong",//给错误字段添加wrong样式
    ignore:"#pass1",//忽略密码不一
    errorElement:"div",//错误信息单独显示一行
    focusInvalid:true,//提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 
    focusCleanup:true,// 当未通过验证的元素获得焦点时,并移除错误提示
    highlight:function (element,errorClass) {//在信息错误时会出现一闪的效果
    $(element).addClass(errorClass);
    $(element).fadeOut().fadeIn()
    }
    });
    $.validator.addMethod("PostCode",function () { //此外,我们还可自定义样式
    var reg=/^[0-9]{6}$/;
    return reg.test(value)
    },"邮编输入不正确");
    });
    今天的表带验证插件你们学会了嘛?
  • 相关阅读:
    PAT顶级 1015 Letter-moving Game (35分)
    PAT顶级 1008 Airline Routes (35分)(有向图的强连通分量)
    PAT顶级 1025 Keep at Most 100 Characters (35分)
    PAT顶级 1027 Larry and Inversions (35分)(树状数组)
    PAT 顶级 1026 String of Colorful Beads (35分)(尺取法)
    PAT顶级 1009 Triple Inversions (35分)(树状数组)
    Codeforces 1283F DIY Garland
    Codeforces Round #438 A. Bark to Unlock
    Codeforces Round #437 E. Buy Low Sell High
    Codeforces Round #437 C. Ordering Pizza
  • 原文地址:https://www.cnblogs.com/DongZixin/p/7056408.html
Copyright © 2011-2022 走看看